Question

我正在尝试将<ul>标记与一行文字内联显示。这是HTML。

<li>
  <input type="checkbox" id="449" value="Whats that?" class="checkbox"><label for="449">Whats that?</label>
  <ul class="449">
    <li>{...removed...}</li>
    <li>{...removed...}</li>
    <li>{...removed...}</li>
    <li>{...removed...}</li>
  </ul>
</li>

现在呈现的是：

Whats that?
  Li element
  Li element
  Li element
  Li element

但是我希望它像这样呈现：

Whats that? Li element
            Li element
            Li element
            Li element

我需要在<ul>中添加哪些CSS规则？并且没关注那个类名，它是用于zany javascript目的。谢谢！

Answer 1

浮动他们：

p, ul {
    float: left;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}

<p>Whats that?</p>
<ul>
    <li>Li element</li>
    <li>Li element</li>
    <li>Li element</li>
    <li>Li element</li>
</ul>

Answer 2

ul.449{
 display: inline-block;   
}

将内联。垂直对齐有点奇怪。

Answer 3

我建议ul.449 { display:inline-table}，但它会支持ie8 +。我认为另一个支持跨浏览器支持的解决方案可能是float:left;所有元素（input，label，ul）并添加margin:0; ul

第一种方法：http://jsbin.com/axako3/2

第二种方法：http://jsbin.com/axako3/3

在文本</ul>所在的行上显示<ul>标记

3 个答案: