如何僅使用ul，li和css來製作此菜單？

我想做到這一點使用CSS：如何僅使用ul，li和css來製作此菜單？

只 ul li，並 a

enter image description here

Ssing元素。紅色的子彈將隱形。

我該怎麼做？我已經嘗試使用float:left作爲水平外部項目符號列表，併爲內部項目使用正常垂直項目列表，但它不起作用。

有沒有比子彈列表更好的方法？

來源

2012-02-02 Pier-Alexandre Bouchard

這是一個家庭作業？ – Jasper 2012-02-02 18:00:20

沒有它是一個個人項目，我只想使用ol li作爲限制，因爲在包括移動瀏覽器在內的各種瀏覽器中都能很好地實現。 – 2012-02-02 18:01:31

圖片很混亂。你能更好地描述它嗎？ – MMM 2012-02-02 18:08:35

我只是想把它作爲一個可行的解決方案。爲什麼不使用div元素？這裏有一個例子：

CSS -

.container { 
    width : 400px; 
    margin : 0; 
    padding : 0; 
} 
.col { 
    display : inline-block; 
    width : 100px; 
    vertical-align : top; 
} 
.col.double { 
    width : 200px; 
}

HTML -

<div class="container"> 
    <div class="row"> 
     <div class="col">9</div> 
     <div class="col">0</div> 
     <div class="col">TITLE</div> 
    </div> 
    <div class="row"> 
     <div class="col double">{image}</div> 
     <div class="col">text text text text text text text text text text text text text text text text text text </div> 
    </div> 
</div>

這裏是一個演示：http://jsfiddle.net/a9m76/1/

來源

2012-02-02 18:15:58 Jasper

是的，差不多，但是在9以下，在你的例子中，我需要一個解釋數字含義的標籤..和9可以集中在這個標籤上。這就是爲什麼我想要使用子彈的原因。 – 2012-02-02 18:21:33

@ Pier-alexandreBouchard http://jsfiddle.net/a9m76/2/，'text-align：center'和'
'標記照顧到了這一點。 – Jasper 2012-02-02 18:23:44

@ Pier-alexandreBouchard您可以更改爲使用兩個容器，使元素排列更像您的模型：http://jsfiddle.net/a9m76/3/ – Jasper 2012-02-02 18:27:46

如何僅使用ul，li和css來製作此菜單？

回答

相關問題