樣式列表按鈕

使用列表，我想創建一個鏈接列表的圖像中樣式列表按鈕

HTML List with CSS background images

<div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;"> 
    <ul> 
     <li id="active"><span><a id="current" href="#add" class="button">News</a></span></li> 
     <li><span> <a href="#Updates" class="button">Updates</a></span> </li> 
     <li><span><a href="#Contact" class="button">Contact Us</a></span></li> 
     <li><span><a href="#Website" class="button">Website</a> </span></li> 
     <li><span><a href="#Refresh" id="#Refresh" class="button">Refresh</a></span> </li> 
    </ul> 
</div>

我是那種貼在CSS（按鈕）和可能之間的間距列表元素。使列表以這種形式出現。任何人有我如何解決這個問題的想法嗎？

來源

2011-07-05 Kobojunkie

或另一種方式是使用花車，使uldisplay: inline-block包含浮動li的

你需要稍微改變HTML所以span在a之內 - 這樣可以隱藏spanned文本，但保留a元素的圖像背景和可點擊區域，我也會給每個鏈接一個獨特的參考（類或ID），因此背景可以單獨應用。

例如HTML：

<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 0px; left: 0px; width: 100%;"> 
    <ul> 
     <li class="active"><a href="#add" id="madd"><span>News</span></a></li> 
     <li><a href="#Updates" id="mupdates"><span> Updates</span></a></li> 
     <li><a href="#Contact" id="mcontact"><span>Contact Us</span></a></li> 
     <li><a href="#Website" id="mwebsite"><span>Website </span></a></li> 
     <li><a href="#Refresh" id="mrefresh"><span>Refresh</span></a> </li> 
    </ul> 
</div>

你可以再戴上UL整個背景，把單個圖像的每個鏈接。

#toolbarbottom ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    width: 100%; 
    background: #ff0; 
} 

#toolbarbottom li { 
    float: left; 
    width: 80px; 
    height: 80px; 
    border: 1px solid #000; /* not required, just to show where individual links are */ 
} 

#toolbarbottom li a { /* make link fill the li element */ 
    display: block; 
    height: 80px; 
} 

#toolbarbottom li span { /* hide the text */ 
    position: absolute; 
    clip: rect(1px, 1px, 1px, 1px); 
    clip: rect (1px 1px 1px 1px); 
} 

/* couple examples of where to put individual backgrounds */ 
#toolbarbottom #mupdates {background: #dad;} 
#toolbarbottom #mcontact {background: #0f0;}

來源

2011-07-05 17:23:21 clairesuzy

我應用了上面的解決方案，並且看到了邊框。如果我將圖像對齊，使其看起來好像恰好位於每個列表元素的中心，並且將點擊區域縮小到該圖像區域，如果我將該跨度移動到點擊內部？本質上，我的跨度是爲了包圍可點擊區域，並且我有了處理邊緣/填充屬性的想法，可以將其縮小到我的最終圖像的大小。 – Kobojunkie

以'背景位置：50％50％'或'center center'爲中心圖像。通過調整'a'來減少可點擊面積 - 所以如果li是80px x 80px，就像我的例子中的'a'可能是display：block; height：40px; margin：20px;'那麼'a'只能在40px的正方形區域點擊，但在每邊保留20px以使其填充80px空間 – clairesuzy

您應該首先將您的css設置爲外部樣式表，而不是將其硬編碼到您的html中。（有關詳情，請參閱http://www.w3.org/TR/html4/present/styles.html）。到li元素之間添加間距可以使用CSS級聯添加一些底部填充如下：

#toolbarbottom ul li { 
    padding-bottom:4px; 
}

將列表內嵌顯示可以使用：

#toolbarbottom ul{ 
    list-style: none; 
    display: inline; 
    padding-left: 0; 
    margin-left: 0; 
}

那些按鈕看起來像圖片，所以要實現這個你只是包括他們每個li元素中：

<li><a href="example.com"><img src="/path/to/image.jpg"></a></li>

來源

2011-07-05 15:46:57

強制性參考：http://w3fools.com/ – Soumya

@ Soumyah92不夠真實，但在這種情況下，對於如此簡單的東西，他們有一個非常簡單和容易理解外部VS內部樣式表教程。如果你有一個更好的教程，隨意發佈一個鏈接:)。 –

http://www.w3.org/TR/html4/present/styles.html：D但是我明白你的觀點。 – Soumya

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

CSS

#toolbarbottom li { 
    display:inline-block; 
    padding:0 10px; 
} 

/* if you have one */ 
#toolbarbottom li img { 
    display:block; 
}

來源

2011-07-05 15:56:12 kei

非常感謝您的評論。除了我已有的東西外，這正是我所需要的。 – Kobojunkie

樣式列表按鈕

回答

相關問題