2

总的来说，我对 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 为其设置边框，但仍将其内联。我在搞砸什么？

4

3 回答 3

1

你需要浮动你的div。

.nav_option {margin:auto; border:solid black 1px; width:50px; float:left}
于 2012-07-24T19:53:14.167 回答
0

@Signify，我要做的是浮动 li 元素或“列表”，而不是显示“内联”。或者也许像 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 中的每一个……嗯，还有更多选择……一切都取决于你想要达到的目标。

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

于 2012-07-24T20:00:57.567 回答
0

第七条是对的。您可能要考虑是否真的需要所有这些额外的元素。

但是，由于问题是在带有内联元素的样式列表上，所以这里有一个 dabblet 来做到这一点：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>
于 2012-07-24T20:49:48.163 回答