保持UL＆gt; LI内容内联

Question

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我是否完全错了？是否无法在<li>元素中嵌套其他元素并继续显示inline？提前谢谢。

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;