Question

每当我想要将元素放在彼此旁边时，我倾向于在它们上面使用浮动。比如使用两个带浮动的div：留在它们上面。我想知道这是最好的策略还是有更好的选择。

这是一个示例代码

 <div>
  <div style="float:left">
    <p>Alphabet</p>
    <select  style="width: 200px;">
     <option>A</option>
     <option>B</option>
    </select>
    </div>
      <div style="float:left;  margin-left:20px;">
         <p>Number</p><input type="text" value="123" />
      </div>
 </div>

在上面的代码中我还能改进什么。是<p>真的有必要还是我应该使用其他标签。

A Live Example

Answer 1

替代方案可以是使用display:inline-block;以及使用this示例中的标签。

标签非常适合具有有限显示功能的设备，特别是手持设备，因为单击它们将激活指定的字段。你应该经常使用它们。

无论如何，我没有看到不使用花车的重点。如果你知道如何正确使用它们，那么它们很棒并且兼容所有浏览器。

Answer 2

例如使用style="display:inline-block"

关于你的第二个问题：

<div style="display:inline-block">
   <label for="alphabet" style="display:block;">Alphabet</label>
   <select id="alphabet" style=" width: 200px;">
     <option>A</option>
     <option>B</option>
   </select>
</div>

使用label更具语义性，并将display:block应用于它，使其跨越整个宽度。

也尽量不要使用内联css。

Answer 3

使用float: left;。在这种情况下没有理由不使用它。

它得到了很好的支持，“inline-block”会给你带来麻烦，除非你为旧版浏览器破解它......当你可以一直使用float: left;时。

页面样式：使用浮动的替代方法

3 个答案: