Question

（因为我的项目目前是私人的，所以我会把它变成一个谜语;）

我有一个导航栏。它包含五个链接。每个人都有padding: 1% ;，margin-right: 1%;并显示display: inline-block;。

它们被封装在一个单独的导航div中。我想要做的是将第一个链接中的文本（不是填充！）与div的左侧对齐。

即。第一个链接，但只有第一个链接，与我的包含div的左边对齐。

感谢您提前提供任何帮助。

编辑：链接到我的页面：www.lennardboehnke.com

Answer 1

要将第一个链接的文本与容器左侧对齐（同时保留悬停效果的填充），可以使用first-child伪选择器选择第一个a并应用负左margin等于左padding的数量以抵消它。

<强> CSS：

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    font-weight: 100;
    font-size: 1em;
    line-height: 1.5;
}
.content {
    width: 70%;
    margin: 0 auto;
    color: #818181;
    text-align: justify;
}
.nav {
    width: 100%;
    margin: 5% 0;
    padding: 0;
}
.nav a {
    text-decoration: none;
    color: cornflowerblue;
    font-size: 1.5em;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 1%;
    font-weight: 200;
    padding: 0 1%;
    transition: background 0.4s ease-in-out 0, color 0.4s ease-in-out 0;
}
.nav a:hover {
    color: #ffffff;
    background: cornflowerblue;
}
/*Negative margin applied here*/
.nav a:first-child {
    margin-left: -1%;
}

<强> HTML：

<div class="content">
    <div class="nav"> 
        <a href="index.php">Home</a>
        <a href="aboutme.php">About Me</a>
        <a href="blog.php">Blog</a>
        <a href="work.php">Work</a>
        <a href="contact.php">Contact</a>
    </div>
</div>

JS小提琴： http://jsfiddle.net/aobqzya0/

对齐div的左侧链接

1 个答案: