gpt4 book ai didi

html - 为什么这种内联显示不起作用?

转载 作者:行者123 更新时间:2023-11-28 04:33:44 24 4
gpt4 key购买 nike

我正在尝试像 2 X 3 表格那样排​​列内容,但使用的是 CSS。但是,当我尝试使用内联 block 时,它不起作用(我尝试了多种浏览器)。查看标有“内容”类的元素。这就是我正在尝试做的“http://aggiebass.net63.net/”编辑:将“.content div ul li”更改为“.content ul li”后,文本仍然无法正常运行。

<head><style>
.content{
background-color:white;
margin:auto;
width:80%;
}
.content img{
width:200px;
height:250px;
}
.content ul li{
display:inline-block;
list-style:none;
</style></head><body>
<div class="content">
<ul>
<li><div class="tbox">
<img src="Calendar.jpg" >
<h2>Calendar</h2>
<p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
</div></li>
<li><div class="tbox">
<img src="Calendar.jpg" >
<h2>Resources</h2>
<p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
</div></li>
<li><div class="tbox">
<img src="Contact.jpg" >
<h2>Newsfeed</h2>
<p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
</div></li>
</ul>
</div>
</body></html>

最佳答案

可能是因为您的 CSS 不正确。 .content div ul li 正在寻找 .content 的 div 后代(没有)。应该是:

.content ul li {
display:inline-block;
list-style:none;
}

jsFiddle example

关于html - 为什么这种内联显示不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25193051/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com