使用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自動撐滿?