Question

好的，当涉及到HTML但是我遇到了一些问题时，它还是一个菜鸟。

我正在尝试将我的链接放在一个不错的地方。这是一个故障。我已经定义了一个960px宽的容器，我把它放在我的标题中。在该容器内部，我有一个图像，这是我的徽标和无序列表，徽标与页面左侧边缘之间的一些空间完美对齐，但列表正对齐右侧，右侧直到页面的边缘，无论我多少改变右边距/填充。

<div id="header">
    <div class="container">
    <img src="images/headerlogo.jpg" height="240" width="381" />
        <ul id="nav">
            <li><a href="index.html"><b>.home</b></a></li>
            <li><a href="blog.html"><b>.blog</b></a><li>
            <li><a href="portfolio.html"><b>.portfolio</b></a></li>
        </ul>
    </div>
</div>

这是伴随元素的CSS。

/* Common Classes */
.container {width:960px;margin:0 auto;}

/* Header */
#header {
height:240px;
background:url(../images/headerbg.jpg) repeat-x; margin:0;
    }
#nav {list-style:none; margin:190px 0 0 0; padding:0; float:right;}
#nav li {float:left; height:45px; text-align: center; padding:7px 1px 5px 5px; margin:0 0 5px 5px;}
#nav li a {color:#a4b2b7; font-family:arial; font-size:25pt; letter-spacing:-2px; text-decoration:none;}
#nav li a:hover {color:#2f738c;}

编辑：此外，第三个列表项目的间距比前两个更远......好像它在该单个项目的左侧有一个边距...为什么？＆GT; _＆LT;

我完全错过了什么吗？你需要的任何其他东西都让我知道。

感谢任何帮助，谢谢你们。

Answer 1

您没有关闭第二个<li>项，这就是为什么第二个和第三个元素之间有空格的原因。它应该是：<li><a href="blog.html"><b>.blog</b></a></li>。

但是当我为margin-right: 10px;提供#nav时，我从右边获得10px空间......

列表项中的间距不一致且列表没有响应边距/填充？

1 个答案: