列出水平行html中的内容块

Question

我正在尝试在水平列表中显示信息块，它们目前是垂直的。有什么建议吗？[阻止示例] [代码]

Answer 1

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background-color: #F8F8F8;
}

<ul>
  <li>Block 1</li>
  <li>Block 2</li>
  <li>Block 3</li>
</ul>

Answer 2

我认为你要问的一种方法是使用CSS＆＃34; display＆＃34;属性。您只需要将所有想要水平内联的块的容器设置为＆＃34; display：inline-block＆＃34;，然后浮动它们。

例如： HTML：

<div id="container">
     <div class="block">
        <p>...</p>
        <p>...</p>
    </div>
    <div class="block">
        <p>...</p>
        <p>...</p>
    </div>
</div>

CSS：

#container {
    display: inline-block;
}

.block {
    float: left;
}