Question

Please see screenshot here

我希望li元素粘贴到header-container border元素而不是页面顶部。

基本上，删除li元素和标题容器边框之间的白色间隙，然后将间隙留在页面顶部。

我尝试过边距，增加填充......不起作用。

请参阅CSS下面的截图：

nav ul {
margin: 0;
padding: 0;

}

nav a {
    display: block;
    padding: 15px 0;
    font-size: 17px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: #000000;
    background: #f3f2f2;
}

请求的HTML代码：

<div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title"><img src="img/mimosa.png" alt="logo"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="lodging.html">Lodging</a></li>
                        <li><a href="tinfo.html">Tourist Info</a></li>
                    </ul>
                </nav>
            </header>
        </div>

Answer 1

感谢小提琴，这有帮助好吧，问题是由于您的图像与导航器位于同一水平区域图像大小推动了链接。解决这个问题的快速方法是添加此

.title{
    position:relative;
    top:10px;
    left:40px;
}

只需根据需要调整顶部和左侧并仔细检查移动设置。如果你设置移动设备的最小宽度为

，则可能需要以不同的方式定位它

Answer 2

你可以尝试将它们变成div，然后根据需要将它们分开。像这样

ul > li /* design the look and feel */
{
    display:block;
    float:left;
    margin: 0 4px 0 4px; /* specify the spacing between each list item. */
 }
li /* stretch each list item */
{
    width:170px;
}

here is the fiddle

Answer 3

整个标签是一个链接还是只有文字？你在链接上有一个15px的填充。因此，如果您使用选项卡的图像，您可以尝试将其更改为：

padding-top: 15px;

或者你可以尝试：

nav li {
margin: 0;
padding: 0;
}

Answer 4

我得到的是，如果0填充或边距不起作用，那么你可以使用负填充或边距，你可以试试！

Answer 5

将您的li标签样式更改为

nav ul li
{
    display:block;
    float:left;
}

这是：fiddle：）

CSS查询（边距？填充？）

5 个答案: