居中a< ul>列表，左侧浮动< li>的CSS [英] Center a <ul> list with a left float <li>'s with CSS

问题描述

我必须重现这样的菜单：

  + ------------- -------------------------------------------------- ------------- + 
选项1 |选项2 |选项3 |选项4 |选项5 
 + ------------------------------------------- --------------------------------- + 
  

但实际上我有这个：

  + ------ -------------------------------------------------- -------------------- + 
选项1 |选项2 |选项3 |选项4 |选项5 
 + ------------------------------------------- --------------------------------- + 
  

我的代码：

 < ul> 
< li>选项1< / li> 
< li>选项2< / li> 
< li>选项3< / li> 
< li>选项4< / li> 
< li>选项5< / li> 
< / ul> 
  

我的实际css是：

  ul {list-style：none outside none; margin：0; padding：0; } 
 li {float：left; margin：0 10px; } 
  

我该如何做？

解决方案

如果可能，请使用IE7替代。

<

将 li 改为使用此代码：

  li {margin：0 10px; display：inline; } 
  

并将 ul s ：

  ul {list-style：none outside none; margin：0; padding：0; text-align：center; } 
  

I have to reproduce a menu like this:

+----------------------------------------------------------------------------+
        Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

But actually I have this:

+----------------------------------------------------------------------------+
Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

My code:

<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
</ul>

My actual css for that code is:

ul { list-style: none outside none; margin:0; padding: 0; }
li { float: left; margin: 0 10px; }

How I can do it?

PD: IE7 alternative if possible.

Thank you in advance!

解决方案

Use this code for the lis instead:

li { margin: 0 10px; display: inline; }

And center your uls' contents:

ul { list-style: none outside none; margin:0; padding: 0; text-align: center; }

这篇关于居中a&lt; ul&gt;列表，左侧浮动&lt; li&gt;的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！