UL的選擇器

我有一個簡單的「ul」菜單，我已經創建了一個問題。我想實現的是簡單地向菜單項1 - 4添加填充，而不是徽標圖像。我曾試過一個關於「a」標籤的課，但沒有喜悅。我可以填充整個UL選擇你所期望的「ul.menu」。（這一切都發生在顯示：內聯）如果我浮動：左而不是顯示：內聯我可以選擇「一個」標籤只，但我蹣跚地集中整個菜單的標題，如果我這樣做。UL的選擇器

那麼解決方案是什麼？我想添加一個100px的填充頂部，只是「a」標籤而不是標識圖片。

HTML

<body> 
    <div class="wrapper clearfix"> 

    <div id="header"> 

<nav> 
    <ul class="menu"> 
     <li><a href="#">item 1</a></li> 
     <li><a href="#">item2</a></li> 
     <img src="images/logo.png" id="logo"> 
     <li><a href="#">item3</a></li> 
     <li><a href="#">item4</a></li> 
    </ul> 

</nav>  

    </div><!--end of header--> 

    </div><!--end of wrapper--> 
</body>

CSS

li { 
display:inline; 
padding-left: 2%; 
padding-right: 2%; 
} 

.wrapper { 
margin-left: auto; 
margin-right: auto; 
width: 100% 
} 
#header { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
height: 400px; 
display: block; 
background-image:url(../images/header.jpg); 
font:"Agency FB"; 
} 

#logo { 
padding-top: 1%; 
padding-bottom: 1%; 
}

千恩萬謝

來源

2012-12-22 joju

在UL的推杆的img標籤不是有效的HTML。你必須首先包裝在L1標籤的IMG，並給它一個ID，像這樣：

<ul> 
<li><a href="#">Stuff</a></li> 
<li><a href="#">Stuff2</a></li> 
<li id="logo_li"><img src="myimage.jpg"></img></li> 
</ul>

然後申請一個CSS是這樣的：

ul li { 
padding-top: 100px; 
} 
ul li#logo_li { 
padding-top: 0px; 
}

這裏的工作示例的jsfiddle你想達到什麼樣的效果： http://jsfiddle.net/4BjEz/ （加紅色邊框讓你可以看到李的身高+填充）

來源

2013-04-29 00:57:24 Tyblitz

回答

相關問題