新手，如何固定宽度？（在线等）

artwl_cn 2009-03-01 11:33:11

大家好，我是一个新手，在做导航条时遇到一个问题，就是导航条宽度不是固定的，当把浏览器窗口宽度减小时导航会分几行显示，请问如何固定：



<!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 runat="server">

    <title>无标题页</title>

    <style type="text/css">

    #nav li{float:left;}

    #nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}

    #nav li a:hover{ background-color:#bbbbbb; color:#ffffff;}

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="nav">

        <ul>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

        </ul>

    </div>

    </form>

</body>

</html>

谢谢大家！

...全文

75 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

javaxi 2009-03-02

打赏
举报

<!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 runat="server">
<title>无标题页</title>
<style type="text/css">
#nav{width:950px;}
#nav li{float:left;}
#nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover{ background-color:#bbbbbb; color:#ffffff;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="nav">
<ul>
<li><a href="Default.aspx">首页</a></li>
<li><a href="Default.aspx">首页</a></li>
<li><a href="Default.aspx">首页</a></li>
<li><a href="Default.aspx">首页</a></li>
<li><a href="Default.aspx">首页</a></li>
<li><a href="Default.aspx">首页</a></li>
<li><a href="Default.aspx">首页</a></li>
</ul>
</div>
</form>
</body>
</html>

西安风影 2009-03-02

打赏
举报

<!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 runat="server">

    <title>无标题页</title>

    <style type="text/css">

    #nav li{float:left;}

    #nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}

    #nav li a:hover{ background-color:#bbbbbb; color:#ffffff;}

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <table cellspacing="0" cellpadding="0" border="0" align="center" width="1000">

      <tr>

        <td>

        <ul id="nav">

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

            <li><a href="Default.aspx">首  页</a></li>

        </ul>

        </td>

      </tr>

    </table>

    </div>

    </form>

</body>

</html>

yang_zheng_2008 2009-03-02

打赏
举报

设置css的width属性

loveseunghun 2009-03-02

打赏
举报

楼上方法可以，如果不想要div的滚动条，可以设置overflow：hidden
[Quote=引用 1 楼 javaxi 的回复:]

<!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 runat="server">
<title>无标题页 </title>
<style type="text/css">
#nav{width:950px;}
#nav li{float:left;}
#nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:1…
[/Quote]

requirejs新手上手课，大佬慎拍

如何使用CSS实现一个自适应两栏布局，其中一栏固定宽度，另一栏自适应宽度？