Question

我对CSS不太熟悉。我有两个li元素，每个元素都包含一个标签和输入字段。我想设置它们的样式，以便“li ** .input_two * ”水平位于“li * .input_one **”之后。什么是CSS？

<li class="input_one" id="first_input">
  <label>name</label>
  <input id="the_name" type="text"/>
</li> 

<li class="input_two" id="second_input">
  <label>age</label>
  <input id="the_age" type="text"/>
</li>

Answer 1

有许多不同的选项，具体取决于：

浏览器兼容性要求（即，我是否需要支持IE6）
我愿意指定宽度吗？
我是否愿意使用clearfix hack或其他标记清除浮动？

两种不同的选择：

li.horizontal {
  display: inline-block;
  *display: inline; /* Hack for IE */
  zoom: 1;
}

或者，使用浮动：

li.horizontal {
  float: left;
  width: X%; /* You should always give a float an explicit width
                to avoid browser compability issues */
}

Answer 2

我会使用列表的显示内联属性 * #menu li {display：inline;} *

http://www.webreference.com/programming/css_lists/

Answer 3

如果你想让标签和输入彼此相邻，那么像这样的东西就应该这样做：

.input_one label,
.input_one input
{
    float:left;
}

如果你想让两个李相邻，那么试试这个：

li
{
    float:left;
}

水平布局的CSS问题

3 个答案: