如何仅使用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来制作此菜单？

回答

相关问题