我目前正在努力使用 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
?提前谢谢你。
最佳答案
.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>
关于html - 保持 UL > LI 内容内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28095107/