html - 对齐 div 左侧的链接

Question

(由于我的元素目前是私有(private)的，所以我会把它当作一个谜语；))

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

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

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

提前感谢您的帮助。

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

Answer 1

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

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 fiddle : http://jsfiddle.net/aobqzya0/