Html内联div对齐问题

Question

<div style="display:inline;  margin-left:10%;">
     <input type="radio">
     <span></span>
</div>

<div style="display:inline;  margin-left:10%;">
     <input type="radio">
     <span></span>
</div>

<div style="display:inline;  margin-left:10%;">
     <input type="radio">
     <span></span>
</div>

你好我有一个类似于上面的布局。我在php文件中还有其他一些东西，但它们无关紧要。例如，每个新的第5个元素都会生成一个新行（br），这在您看到图片时会有意义。

以下是结果的图像表示：

这就是我需要的：

我怎么可能这样做，我会感激任何想法。干杯。

注意：Span标签包含单选按钮旁边的文本。

Answer 1

iyiakşamlar:)你可以删除div's，在单选按钮内创建类，并将它们完全放入每行的容器中。

LIVE DEMO HERE

<div class="container">
         <input type="radio" class="radyo">
         <div class="text">a2</div>

         <input type="radio"class="radyo">
         <div class="text">a3</div>

         <input type="radio"class="radyo">
         <div class="text">a4</div>

         <input type="radio"class="radyo">
         <div class="text">a5</div>
</div>


<div class="container">
         <input type="radio"class="radyo">
         <div class="text">beyler ben geldim</div>

         <input type="radio"class="radyo">
         <div class="text">tamam</div>

</div>

Answer 2

首先，避免使用内联样式。

如果要将结果放在第二个图像中，只需为每个元素定义宽度而不是边距。

Answer 3

<div style="display:inline-block; margin-left:10%; width:15%;">

或者根据需要设置左边距和宽边。

Answer 4

我建议使用嵌套的div模式，在这里你可以使用没有边距/填充的精确列，并根据需要插入一个保持边距/填充的div。然后将复选框推入每个嵌套的div中。我还建议在<label>上使用<span>（因为它是一个具有一些额外属性的跨度）（MDN Label）

    .cols {float:left;width:25%} //Set columns up, without margin/padding so they align as expected in 4.

    .col {margin-left:10%;}  // Inner column with margin/padding etc.


    <div class='cols'>
       <div class='col'>
          <input type='radio' name='radio1' /><label for='radio1'></label> 
       </div> 
    </div>

    <div class='cols'>
<div class='col'>
          <input type='radio' name='radio2' /><label for='radio2'></label> 
       </div>
    </div>

    <div class='cols'>
<div class='col'>
          <input type='radio' name='radio3' /><label for='radio3'></label> 
       </div>
    </div>

    <div class='cols'>
<div class='col'>
          <input type='radio' name='radio4' /><label for='radio4'></label> 
       </div>
    </div>

Answer 5

如果您拥有外部容器的宽度，则可以更容易地将固定大小的div对齐。例如，如果我们有一个带width: 300px;的div，并且我们想要一行3个无线电盒子，我们为它们指定width: 100px;。添加float: left;，它应该很适合你。

Here's a live demo.

如果固定宽度不适合您，还有许多其他方法可以做到这一点，如果这对您不起作用，我可以分享。