Question

一般来说我对CSS还是有点新手，所以请保持温和。我正在尝试创建一个列出div的基本无序水平列表（稍后会给出一个背景图像，因为它将用作导航栏）。出于某种原因，我似乎无法显示它。我正在测试IE8，因为我认为它是否适用于该浏览器，它适用于所有（我会在其他浏览器中测试，因为我接近完成，我保证）。

我正在使用<!DOCTYPE html>

CSS

#nav_list {
list-style-type:none;
margin:0;
padding:0;
margin:auto;}

.list{display:inline;}

.nav_option {margin:auto; border:solid black 1px; width:50px;}

HTML

<div id="nav">
<ul id="nav_list">
    <li class="list Home"><div class="nav_option Home">Home </div></li>
    <li class="list Shop"><div class="nav_option Shop"> Shop</div></li>
    <li class="list Game"><div class="nav_option Game">Game </div></li>
    <li class="list Map"><div class="nav_option Map">Map</div></li>
    <li class="list Information"><div class="nav_option Information">Information</div></li>
    </ul>
</div>

出于某种原因，我甚至无法让IE在其周围放置边框，但仍然可以将其内联。我搞砸了什么？

Answer 1

你需要漂浮你的div。

.nav_option {margin:auto; border:solid black 1px; width:50px; float:left}

Answer 2

@Signify，我要做的是浮动li元素或“list”，而不是显示“inline”。或者像Ed Charbeneau所说的那样浮动.nav_option。另外，既然你正在开始，你是否明白当你设置class =“list Home”时，你实际上是在为那个li项设置两个类？使用class =“nav_option Home”时也是如此。要在CSS中使用这两个类来使用这两个类，你可以使用类似的东西：

li.list.Home

这有时候很有用，但是，既然你开始了，我怀疑你们两个都需要。每个列表项中的div都是一样的。

所以，我相信你可以简化事情并使用这样的东西：

<nav>
    <ul>
        <li class="home">Home</li>
        <li class="shop">Shop</li>
        <li class="game">Game</li>
        <li class="map">Map</li>
        <li class="info">Information</li>
    </ul>
</nav>

如果您真的需要它们，只需添加更多标签和类。请注意，我正在使用标记HTML5标记。有了这些，你可以做很多事情。根据您的布局以及您对旧浏览器的关注程度，有时您甚至不需要所有这些类。您可以使用li：nth-child（1），li：nth-child（2）等来“指向”css中的每一个......嗯，还有更多的选项...全部取决于你希望实现的目标。

最后一次：我真的怀疑你需要所有这些课程（甚至是元素）。

Answer 3

第7是对的。如果你确实需要所有这些额外的元素，你可能会想。

但是，由于问题出在带有内联元素的样式列表中，这里有一个麻烦：http://dabblet.com/gist/3172553 对于现代浏览器来说css可能更好，但由于IE8（可能是IE7）是必需的，我省略了nth-child选择器，并为第一个和最后一个元素使用了一个单独的类来添加额外的样式。

#nav_list, nav {
    display: block;
}

#nav_list li {
    display: inline-block;
    border: 1px solid black;
    margin-right: -1px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

#nav_list li.last {
    margin: 0;
}

不要忘记，如果使用内联元素，换行符将计为空格并将显示。因此，列表中的html必须全部在一行中：

<nav>
  <ul id="nav_list">
    <li id="home" class="first">Home</li><li id="shop"> Shop</li><li id="game">Game</li><li id="map">Map</li><li id="info" class="last">Information</li>
  </ul>
</nav>

IE 8中的HTML5和CSS内联无序列表

CSS

HTML

3 个答案: