Question

如何根据标题和每列一个列表显示以下代码？

我尝试使用以下代码并在标题标记处使用样式属性display:inline-block;，但它们都不适用于我。

感谢您的帮助。

<!doctype html>
<html lang="en">
  <body style="display: inline-block"> 
    <div>
      <h2>Members</h2> 
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>	
      </ul>
    </div>
    <div>
      <h2>1st shift</h2>
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>
        <li>person_4</li>	
      </ul>
    </div> 
    <br style="clear:both"> 
  </body>
</html>

Answer 1

浮动就足以完成这项任务。虽然添加一个div包装它们是明智的，但是你可以应用它们。由于使用浮子从文档流中移除元素，因此清除是必要的。明确将否定此问题并恢复页面流。

请在下面找到一个粗略的例子（减去清除）。

.list{
  float: left;
  padding: 10px;
  border: 1px solid red;
  margin: 0 20px 0 0;
}

.list ul{
  margin: 0;  
  padding-left: 20px;
}

<!doctype html>
<html lang="en">
  <body style="display: inline-block"> 
    <div class="list">
      <h2>Members</h2> 
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>	
      </ul>
    </div>
    <div class="list">
      <h2>1st shift</h2>
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>
        <li>person_4</li>	
      </ul>
    </div> 
    <br style="clear:both"> 
  </body>
</html>

Answer 2

你的div实际上需要使用内联块显示（宽度最多为容器的50％，所以它们都适合），请看这里：

＆＃13;

div {width: 40%; display: inline-block; vertical-align: top}

＆＃13;

<!doctype html>
<html lang="en">
  <body> 
    <div>
      <h2>Members</h2> 
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>	
      </ul>
    </div>
    <div>
      <h2>1st shift</h2>
      <ul>
        <li>person_1</li>
        <li>person_2</li>
        <li>person_3</li>
        <li>person_4</li>	
      </ul>
    </div> 
    <br style="clear:both"> 
  </body>
</html>

＆＃13;

Answer 3

试试这个：

.text{
  float: left;
  padding: 10px;
}

.text ul{
  margin: 0;  
  padding-left: 20px;
}

DEMO HERE

显示带有标题的列表

3 个答案: