Question

我试图像2 x 3表那样安排内容，但是使用css。但是，当我尝试使用内联块时，它不起作用（我尝试过多个浏览器）。查看使用＆＃34;内容＆＃34;标记的项目这就是我要做的事情＆＃34; http://aggiebass.net63.net/＆＃34; 编辑：更改＆＃34; .content div ul li＆＃34; to＆＃34; .content ul li＆＃34;文本仍然没有正确行事。

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

Answer 1

可能是因为你的CSS不正确。 .content div ul li正在寻找.content的div后代（并且没有一个）。它应该是：

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

<强> jsFiddle example

Answer 2

.content div ul li不存在，您应该使用：

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

Answer 3

尝试更改

.content div ul li

到

.content ul li

Answer 4

您的CSS中有错误您没有正确地级联您的元素。我想你想做点什么

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

不

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

第二个对HTML结构无效

Answer 5

更正语法修复了图片的问题，但仍然让下面的段落蔓延。

更正语法并为段落添加类似乎可行。

  div.tbox {
    width:200px;
    padding:10px;
  }

为什么这种显示内联工作不起作用？

5 个答案: