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

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

如果您想在第二张图片中显示结果，只需为每个元素定义宽度而不是边距。

Answer 2

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

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

Answer 3

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

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 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.

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

Html内联div对齐问题

5 个答案: