使用ul做横向菜单，怎么让最后一个li自动撑满剩余的部分
日期：2014-05-17 浏览次数：20741 次
使用ul做横向菜单，如何让最后一个li自动撑满剩余的部分？
代码如下，请问如何让最后一个li "Tab End "自动撑满剩余的部分？谢谢！
--------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> Untitled 1 </title>
<style type= "text/css ">
ul{
list-style-type:none;
margin:0px;
padding:5px;
width:800px;
color:white;
border:1px green solid
}
.liCommon{
display:inline;
background-color:purple;
padding:3px;
margin:2px
}
.liCommonEnd{
display:inline;
background-color:purple;
padding:3px
}
</style>
</head>
<body>
<div style= "width:800px ">
<ul>
<li class= "liCommon "> Tab 1 </li>
<li class= "liCommon "> Tab 2 </li>
<li class= "liCommon "> Tab 3 </li>
<li class= "liCommon "> Tab 4 </li>
<li class= "liCommon "> Tab 5 </li>
<li class= "liCommonEnd "> Tab End </li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
不知道你是说怎么个撑满；我理解如下
把ul 设背景，li设边框区分两个li
最后一个右边框不设
------解决方案--------------------
帮顶
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> test </title>
<style type= "text/css ">
ul {
list-style:none;
margin:0;
padding:0;
width:800px;
color:#fff;
border:1px solid #050;
}
li {
float:left;
margin:1px;
width:100px;
height:28px;
line-height:28px;
background:#050;
}
.liend {
float:none;
width:auto;
}
</style>
</head>
<body>
<div>
<ul>
<li> Tab 1 </li>
<li> Tab 2 </li>
<li> Tab 3 </li>
<li> Tab 4 </li>
<li style= "margin-right:-1px; "> Tab 5 </li>
<li class= "liend "> Tab End </li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
要是我就把没个li加上白色边框，背景色变为紫色。
------解决方案--------------------
嗯，樓上的樓上不錯。幫頂一下。
我的需求正好相反，如何將第一個li自動撐滿？
代码如下，请问如何让最后一个li "Tab End "自动撑满剩余的部分？谢谢！
--------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> Untitled 1 </title>
<style type= "text/css ">
ul{
list-style-type:none;
margin:0px;
padding:5px;
width:800px;
color:white;
border:1px green solid
}
.liCommon{
display:inline;
background-color:purple;
padding:3px;
margin:2px
}
.liCommonEnd{
display:inline;
background-color:purple;
padding:3px
}
</style>
</head>
<body>
<div style= "width:800px ">
<ul>
<li class= "liCommon "> Tab 1 </li>
<li class= "liCommon "> Tab 2 </li>
<li class= "liCommon "> Tab 3 </li>
<li class= "liCommon "> Tab 4 </li>
<li class= "liCommon "> Tab 5 </li>
<li class= "liCommonEnd "> Tab End </li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
不知道你是说怎么个撑满；我理解如下
把ul 设背景，li设边框区分两个li
最后一个右边框不设
------解决方案--------------------
帮顶
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> test </title>
<style type= "text/css ">
ul {
list-style:none;
margin:0;
padding:0;
width:800px;
color:#fff;
border:1px solid #050;
}
li {
float:left;
margin:1px;
width:100px;
height:28px;
line-height:28px;
background:#050;
}
.liend {
float:none;
width:auto;
}
</style>
</head>
<body>
<div>
<ul>
<li> Tab 1 </li>
<li> Tab 2 </li>
<li> Tab 3 </li>
<li> Tab 4 </li>
<li style= "margin-right:-1px; "> Tab 5 </li>
<li class= "liend "> Tab End </li>
</ul>
</div>
</body>
</html>
------解决方案--------------------
要是我就把没个li加上白色边框，背景色变为紫色。
------解决方案--------------------
嗯，樓上的樓上不錯。幫頂一下。
我的需求正好相反，如何將第一個li自動撐滿？
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
