0 
<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 标签包含单选按钮旁边的文本。

4

5 回答 5

0

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

现场演示在这里

<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>
于 2013-08-19T19:11:33.030 回答
0 
<div style="display:inline-block; margin-left:10%; width:15%;">

或设置您认为合适的 margin-left 和 width 。

于 2013-08-19T19:02:36.513 回答
0

如果您有外部容器的宽度，那么在其中对齐固定大小的 div 会更容易。例如，如果我们有一个带有 的 div width: 300px;，并且我们想要一行 3 个单选框，我们width: 100px;为它们指定。添加float: left;，它应该适合你。

这是一个现场演示。

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

于 2013-08-19T19:16:12.547 回答
0

我建议使用嵌套 div 模式，您可以在其中使用没有边距/填充的精确列，并根据需要插入一个保持边距/填充的 div。然后将您的复选框推送到每个嵌套的 div 中。我还建议使用<label>over <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>
于 2013-08-19T19:14:23.573 回答
0

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

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

于 2013-08-19T18:54:31.360 回答