为什么还是没有自适应的效果
为什么菜单项的宽度还是没有根据内容自适应宽度？？？？
se7en_love
2014-12-16
5 回答
刚刚试了一下图片，也是可以的，除了按钮的左右两边用左右对齐以外，其他部分用背景颜色填充，就可以达到宽度自适应了，代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px;border-bottom:1px solid #21530C; }
ul { list-style-type: none; height: 40px; width:500px; }
li { float: left; }
a{border-radius:5px; display:inline-block; padding:15px; text-decoration:none; }
a:hover{color:#fff;background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) no-repeat right;background-color:#21530c;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="ac"><span>首页</span></a></li>
<li><a href="#"><span>最新产品</span></a></li>
<li><a href="#"><span>内部新闻</span></a></li>
<li><a href="#"><span>联系我们联系房顶上体会过投入工会 我们</span></a></li>
</ul>
</body>
</html>
用CSS3，图片素材不完整，且长度有限制，他只是能很好的交互而已，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:5px solid #21530C;
}
li { float: left; margin:0;padding:0;}
li a{height:27;
text-align:center;
text-decoration:none;
color:#000;
padding:10px ;
}
li a:hover{
border:#21530c 3px solid;
border-radius:5px 5px 0 0;
background:#21530c;
color:#fff;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="ac"><span>首页</span></a></li>
<li><a href="#"><span>最新产品</span></a></li>
<li><a href="#"><span>内部新闻</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left; }
a{
display:inline-block;height:25px;line-height:25px;margin-left:15px;text-decoration:none;
background:url(http://img1.sycdn.imooc.com//538588030001c52300090027.jpg) no-repeat;padding-left:8px;
}
a span{
display:inline-block;height:25px;
background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) right 0;padding-right:8px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>最新产品</span></a></li>
<li><a href="#"><span>内部新闻</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left; }
a{
display:inline-block;height:25px;line-height:25px;margin-left:15px;text-decoration:none;
background:url(http://img1.sycdn.imooc.com//538588030001c52300090027.jpg) no-repeat;padding-left:8px;
}
a span{
display:inline-block;height:25px;
background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) right 0;padding-right:8px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>最新产品</span></a></li>
<li><a href="#"><span>内部新闻</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left; }
a{
display:inline-block;height:25px;line-height:25px;margin-left:15px;text-decoration:none;
background:url(http://img1.sycdn.imooc.com//538588030001c52300090027.jpg) no-repeat;padding-left:8px;
}
a span{
display:inline-block;height:25px;
background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) right 0;padding-right:8px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>最新产品</span></a></li>
<li><a href="#"><span>内部新闻</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left; }
a{
display:inline-block;height:25px;line-height:25px;margin-left:15px;text-decoration:none;
background:url(http://img1.sycdn.imooc.com//538588030001c52300090027.jpg) no-repeat;padding-left:8px;
}
a span{
display:inline-block;height:25px;
background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) right 0;padding-right:8px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>最新产品</span></a></li>
<li><a href="#"><span>内部新闻</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</body>
</html>
举报
0/150
提交
取消
