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

我试图安排像2 X 3表的内容，但使用css。然而，当我尝试使用内联块它不工作(我已经尝试了多个浏览器)。请参阅用"content"类标记的项。这就是我要做的"http://aggiebass.net63.net/"编辑:修改后。内容div li"to"。内容"文本"仍然不能正确执行。

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

<<p> jsFiddle例子/strong>

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

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

尝试更改

.content div ul li

.content ul li

你的CSS有错误您没有正确地级联元素。我认为你想做一些像

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

不

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

第二个是无效的HTML结构

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

纠正语法并为段落添加一个类似乎有效。

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

相关内容

最新更新

热门标签：