保持 UL > LI 内容内联

Question

我目前正在努力使用 HTML 和 css 创建水平无序列表。理想情况下，我可以在每一行中添加其他元素，并且它会保持其 水平。

这是我目前正在使用的css/html：

.map-sub-container {
  background-color: red;
  border: solid 2px black;
}
.map-sub-nav {
  list-style-type: none;
}
.map-sub-nav > li {
  padding: 10px;
  display: inline;
}

<div class="map-sub-container">
  <ul class="map-sub-nav">
    <li>
      <div>
        <h1>Hello</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
    <li>
      <div>
        <h1>Goodbye</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
  </ul>
</div>

我是不是完全错了？难道不能在一个<li>元素中嵌套额外的元素，继续显示inline吗？提前谢谢你。

Answer 1

.map-sub-container {
  background-color: red;
  border: solid 2px black;
}
.map-sub-nav {
  list-style-type: none;
}
.map-sub-nav > li {
  padding: 10px;
  display: inline;
  posistion:relative;
  float:left;
  width: 45%;
  margin: 0 auto;
}

<div class="map-sub-container">
  <ul class="map-sub-nav">
    <li>
      <div>
        <h1>Hello</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
    <li>
      <div>
        <h1>Goodbye</h1>
        <p>I am a paragraph</p>
      </div>
    </li>
  </ul>
<div style="clear:both;"></div>
</div>

保持 UL > LI 内容内联

Keep UL > LI content inline

html

css

html-lists