對齊左側的div

（我會讓這個像一個謎語，因爲我的項目目前是私人的;））對齊左側的div

我有一個導航欄。它包含五個鏈接。每個人都有一個padding: 1% ;,margin-right: 1%;和顯示display: inline-block;。

它們被封裝在一個單獨的導航div中。我想要做的是將第一個鏈接中的文本（不是填充！）對齊到div的左側。

即第一個鏈接，但只有第一個鏈接，與我包含div的左側對齊。

感謝您提前提供任何幫助。

編輯：鏈接到我的網頁：www.lennardboehnke.com

來源

2014-09-10 codeUX

有點像CSS'：第一child'選擇？ – LcSalazar 2014-09-10 18:34:21

要分享的任何代碼？如果大量使用'a：nth-child（1）{margin-right：whatever;}' – 2014-09-10 18:35:10

我把一個鏈接到我的網站，不確定你的意思是：第一個孩子的選擇 – codeUX 2014-09-10 18:40:33

你的第一個鏈接的文本對齊到容器的左邊（同時保留懸停效果填充），您可以使用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小提琴：http://jsfiddle.net/aobqzya0/

來源

2014-09-10 19:01:35

該死！隊友的歡呼聲！ – codeUX 2014-09-10 19:05:47

對齊左側的div

回答

相關問題