如何使導航跨度HREF中整個DIV

我試圖讓我的資產淨值跨越整個DIV，我希望自己的背景顏色/目標有33％如何使導航跨度HREF中整個DIV

<nav> 
<a href="index.html" id="nav1">Home</a> 
<a href="lesson1.html" id="nav2">Lesson 1: Intro</a> 
<a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a> 
</nav> 

#nav1 { 
    background-color: #a43200; 
    color: white; 
    text-decoration: none; 
    padding: 10px 100px 10px 100px; 
    font-size: 1.3em; 
} 
#nav2 { 
    background-color: #c73d00; 
    color: white; 
    padding: 10px 100px 10px 100px; 
    font-size: 1.3em; 
    text-decoration: none; 
}

來源

2013-04-01 Adam Ginther

「a」是一個內聯標籤。對於你想要的，你需要將它轉換爲一個塊元素。使用'display：block;'並從那裏取出。 – Daniel

增加的顯示器的寬度：阻止你的CSS。

見琴：http://jsfiddle.net/djwave28/audAt/6/

<nav> 
    <ul> 
     <li><a href="index.html" id="nav1">Home</a> 
     </li> 
     <li><a href="lesson1.html" id="nav2">Lesson 1: Intro</a> 
     </li> 
     <li><a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a> 
     </li> 
    </ul> 
</nav> 

nav ul { 
    list-style:none; 
} 
nav ul li { 
    float:left; 
    width:30%; 
} 
#nav1 { 
    position:relative: float:left; 
    background-color: #a43200; 
    color: white; 
    text-decoration: none; 
    padding: 10px 0px 10px 0px; 
    font-size: 1.3em; 
    display:block; 
} 
#nav2 { 
    display:block; 
    position:relative: float:left; 
    background-color: #c73d00; 
    color: white; 
    padding: 10px 0px 10px 0px; 
    font-size: 1.3em; 
    text-decoration: none; 
}

來源

2013-04-01 02:54:11 Daniel

這將它們垂直排列。我正在嘗試將它們水平排列。 –

最好使用一個列表來排列你想要的菜單結構。看到更新的小提琴。但其他人已經提出了很好的解決方案.. :) – Daniel

有幾件事情不對您的設置（例如：您有多個id S，這是一個沒有沒有，所以我他們改變class es）。

我也經歷了，並嘗試刪除一些重複的樣式。所以你會發現很多按鈕樣式已經被濃縮爲一種#nav a樣式，然後自定義顏色以不同的樣式被應用。

我已將#nav中的font-size屬性設置爲12px，但這僅用於演示目的。請按照你的喜好編輯。

這撥弄應該有所幫助：

小提琴：
http://jsfiddle.net/fACmM/

HTML：

<div id="nav"> 
<a href="index.html" class="nav1">Home</a> 
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a> 
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a> 
</div>

CSS：

#nav 
{ 
    width:100%; 
    font-size:12px; 
} 
#nav a 
{ 
    width:33%; 
    float: left; 
    color: white; 
    padding: 10px 0px; 
    font-size: 1.3em; 
    text-decoration: none; 
    text-align:center; 
} 

.nav1 { 
    background-color: #a43200; 
} 
.nav2 { 
    background-color: #c73d00; 
}

來源

2013-04-01 02:58:49 Jace

使用class，而不是id順便說一下這個article幫助你明白爲什麼你用類而不是ID與你當前的代碼

HTML

<nav> 
<a href="index.html" class="nav1">Home</a> 
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a> 
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a> 
</nav>

CSS

nav {width:960px} 
nav a { 
    float:left; 
    text-decoration: none; 
    padding: 10px 50px 10px 50px; 
    font-size: 1.3em; 
    color: white; 
} 
.nav1 { 
    background-color: #a43200; 
} 
.nav2 { 
    background-color: #c73d00; 
}

working demo

希望對你有所幫助

來源

2013-04-01 03:04:19 jhunlio

如何使導航跨度HREF中整個DIV

回答

相關問題