如何对齐多个 img 和单选按钮内联? [英] How to align mutilple img and radio button inline?

问题描述

我想像这样内联对齐 img 和单选按钮.

img img img无线电广播电台

我试过了

但结果是

收音机图片收音机图片收音机图片

解决方案

你可以使用 flexbox 来做到这一点

将图片和收音机放在一个 div 中，并将 div 的样式设置为 display:flex

<div class="imgDiv"><img src=#";style="vertical-align: middle;"/>
<div class="imgDiv"><img src=#";style="vertical-align: middle;"/>

<div class="imgDiv"><img src=#";style="vertical-align: middle;"/>

<风格>.myDiv{显示:弹性；}.imgDiv{显示:弹性；弯曲方向:柱</风格>

I want to align img and radio button inline like this.

img   img   img

radio radio radio

I tried

<div><img style="vertical-align: middle"><input type="radio"></div>

but result is

radio
img
radio
img
radio
img

解决方案

you can use flexbox to do this

put the images and radios inside a div and set the div's style to display:flex

<div class="myDiv">
    <div class="imgDiv"><img src="#" style="vertical-align: middle;"/><input type="radio"/></div>
    <div class="imgDiv"><img src="#" style="vertical-align: middle;"/><input type="radio"/></div>
    <div class="imgDiv"><img src="#" style="vertical-align: middle;"/><input type="radio"/></div>
</div>

<style>
.myDiv{
   display : flex;
}
.imgDiv{
  display: flex;
  flex direction: column
</style>

这篇关于如何对齐多个 img 和单选按钮内联?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！