在UL中具有对齐LI的CSS [英] CSS with Aligned LI within a UL

问题描述

我试图让UL中的一些LI在页面中左对齐，右对齐和居中。对于我的生活，我无法弄清楚如何将某些东西居中在左右对齐的LI的同一行。

  ul {
 margin：1em 0; 
 padding：0 
} 
 
 ul li {
 display：inline-block; 
 white-space：nowrap; 
保证金：5px 
} 
 
 ul li.left {
 float：left; 
 text-align：left; 
} 
 
 ul li.center {
 float：left; 
 text-align：center; 
} 
 
 ul li.right {
 float：right; 
 text-align：right; 
 
  

---

 < UL> 
< li class =left> left< / li> 
< li class =center>中心< / li> 
< li class =right>正确< / li> 
< / ul> 
 
< ul> 
< li class =left> left< / li> 
< li class =right>正确< / li> 
< / ul> 
 
< ul> 
< li class =left> left< / li> 
< / ul> 
  

任何人都可以帮忙吗？顺便说一句，我试图避免DIVs。

谢谢！

解决方案

如果你想让每个人平均分享屏幕空间，你可以这样做：

 < style> 
 .split {width：33％;向左飘浮; } 
< / style> 
 
< ul> 
< li class =split>向左< / li> 
< li class =split>中心< / li> 
< li class =split>正确< / li> 
< / ul>不过，您可能希望将样式移动到外部样式表中。
 $ b  $> b 
 
 
 
 $ b
I am trying to have some LIs within a UL align left, right, and center within a page. For the life of me, I can't figure out how to keep something "centered" on the same line as a left and right aligned LI.
ul {
    margin:1em 0;
    padding:0
} 

ul li{
    display:inline-block;
    white-space:nowrap; 
    margin:5px
} 

ul li.left{
    float: left; 
    text-align:left; 
} 

ul li.center{
    float:left; 
    text-align: center;
} 

ul li.right{
    float: right; 
    text-align:right; 
} 




<ul> 
    <li class="left">left</li> 
    <li class="center">center</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
    <li class="right">right</li> 
</ul> 

<ul> 
    <li class="left">left</li> 
</ul> 
Can anyone help? BTW, I've trying to avoid DIVs.

Thanks!
解决方案
If you want each to share screen space equally, you can do this:
<style>
    .split { width: 33%; float: left; }
</style>

<ul>
    <li class="split">left</li>
    <li class="split">center</li>
    <li class="split">right</li>
</ul>
You'll want to move your styles to an external stylesheet, though.

                        
这篇关于在UL中具有对齐LI的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！