Fatal编程技术网
  • jquery/
  • Jquery 列表项的水平对齐/对齐？

Jquery 列表项的水平对齐/对齐？

jquery html css navigation

Jquery 列表项的水平对齐/对齐？,jquery,html,css,navigation,Jquery,Html,Css,Navigation,我有以下情况： <nav id="access" role="navigation"> <div class="menu"> <ul> <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li> <li class="page_item">&l

我有以下情况：

<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
    </div>
</nav>
我浮动所有菜单元素，使其并排对齐。我想知道如何在所有这些列表项之间创建相等的空间，如下所示：

____________________________________ <- this is what I have now
item  item  item  item  item

____________________________________ <- this is what I want
item    item    item    item    item

\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuup>怎么样：


#access .menu ul li 
{     
   float: left; 
   margin-right: 10px
} 



我能想到的第一种方法是使用表而不是无序列表。默认情况下，它将按照您想要的方式显示。此外，由于对齐是自动的，因此添加更多菜单项将轻而易举


唯一合理的跨浏览器非JavaScript方法恐怕是
。这不是很优雅，但它确实起作用了。基于浮动的布局将无法正确显示可变大小的项目。整个过程甚至应该在IE6中运行

标记


<table class="nav">
    <tr>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        ...
    </tr>
</table>


您需要确保所有项目的内容都将空格替换为
，以防止由于
1px
宽度而出现的文本换行


.menu {
    text-align: justify;
}
.menu ul,
.menu li {
    display: inline;
}
.menu ul::after {
    display: inline-block;
    width: 100%;
    content: "";
}    


但是为了实现跨浏览器兼容性（IE7），您应该用标记中的一个附加元素替换
：：after
：


<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
        <span></span>
    </div>
</nav>





    

  • 

  • 

  • 

  • 





请参阅。
如果您希望它与任意数量的“li”一起使用，则此答案适用：

如果给您的li显示：块


li {float:left; display:block; }


然后，以下脚本为您的应用程序执行此任务：


var first = $("li:first");
var allOther = $("li").not(":first, :last");
var last = $("li:last");

var remainingWidth = $(".menu").width() - first.width() - last.width();
allOther.width(remainingWidth / allOther.length).css("text-align", "center"); 


在jsFiddler中查看它：
FIDDLE:

*CSS（从浮动li更改为内联li）*


#access .menu ul {
    text-align:center;   
}

#access .menu ul li:first-child {
    padding-left:0 !important;
}

#access .menu ul li:last-child {
    padding-right:0 !important;
}

#access .menu ul li {
    display:inline;
    padding:0 35px; /* ADJUST PADDING */
}


CSS:


#access
{
    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;
}

.menu ul li
{
    float: left;
}

.menu ul {
    margin: 0;
    padding: 0
}



var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() {
    w = w + $(this).width();
});
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() {
    $(this).css({
        'margin-left': parseInt(eachPlot) + 'px'
    });
});



.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
.menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
.menu li:hover { background:black; color:white; }
.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }



<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>


JQUERY:


#access
{
    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;
}

.menu ul li
{
    float: left;
}

.menu ul {
    margin: 0;
    padding: 0
}



var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() {
    w = w + $(this).width();
});
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() {
    $(this).css({
        'margin-left': parseInt(eachPlot) + 'px'
    });
});



.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
.menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
.menu li:hover { background:black; color:white; }
.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }



<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>


此方法100%有效
CSS:


#access
{
    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;
}

.menu ul li
{
    float: left;
}

.menu ul {
    margin: 0;
    padding: 0
}



var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() {
    w = w + $(this).width();
});
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() {
    $(this).css({
        'margin-left': parseInt(eachPlot) + 'px'
    });
});



.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
.menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
.menu li:hover { background:black; color:white; }
.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }



<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>


HTML:


#access
{
    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;
}

.menu ul li
{
    float: left;
}

.menu ul {
    margin: 0;
    padding: 0
}



var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() {
    w = w + $(this).width();
});
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() {
    $(this).css({
        'margin-left': parseInt(eachPlot) + 'px'
    });
});



.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
.menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
.menu li:hover { background:black; color:white; }
.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }



<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>



    

  • 关于
    • 

  • 公司
    • 

  • 产品
    • 

  • 菜单项
    • 



将此添加到css:
#access.menu ul{width:100%；}
会做什么？或者实际上，
.menu ul li{width:100%；}
对于这个问题，
右边距是否是一个更好的选择？否则，最左边的项目将被错误定位。这只是在您正好有四个项目的情况下，而且硬编码35px用于填充也不是一个好主意，因为任何微小的更改都可能破坏外观。另外：并非所有浏览器都支持第一个子项。我在下面提出了一个jquery解决方案来解决这些问题。这是跨浏览器的吗？