上下两行导航的时候如何定义css 才能上下对齐?

上边导航是“文字|文字|文字”,下边导航是“英文英文英文”... 上边导航是“文字|文字|文字”,下边导航是“英文 英文 英文” 展开
 我来答
回忆526
推荐于2016-02-22 · TA获得超过4165个赞
知道大有可为答主
回答量:3276
采纳率:87%
帮助的人:1905万
展开全部

上下两行导航的时候定义css 才能上下对齐,首先我们需要给这个上下2个导航条设置一样的宽度和高度,然后在给导航条中的每个li设置一样的宽度和高度,和margin值,就能保持上下对齐了,通过代码来理解:

<html>
<head>
<style> //通过style实现
#nav{
width:900px; 
height:30px;
}

#nav ul li{
float:left;
width:60px;     //当宽度不够的时候自然就会往下走,然后也是对齐第一个排列的
}
</style>
<link rel='stylesheet' type='text/css' href='./css/index1.css'> //通过外部文件实现
</head>
<body>
<div class="nav" style="width:400px">  //通过行内实现
     <ul>
         <li>
                <a href="">首页</a>
            </li>
            <li>           
                <a href="">兴趣爱好</a>
            </li>
            <li>            
                <a href="index.php">好友印象</a>
            </li>
            <li>
                <a href="register.php">会员注册</a>
            </li>
            
            <li>
                <a href="dengtu.php">会员登录</a>
            </li>
        </ul>
    </div>
</body>
</html>
mickgarvey
2013-01-23 · 超过19用户采纳过TA的回答
知道答主
回答量:74
采纳率:0%
帮助的人:41.8万
展开全部
给li定义一 个宽度,还有给左浮动float:left
追问
浮动,宽度都有 主要是上边的汉子导航 之间有“ |  ”  下边的菜单是英文的,长短不一 ,要求英文还要剧中 
菜单菜单 | 菜单菜单 | 菜单菜单
one VIEWPOINT VIEWPOINT
追答
你给ul都给一个 clear:left 来清除浮动,就会一个在上,一个在下。至于“|”你可以用border或者用图像background来实现,居中就用text-align:center
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
zhongly168
2013-01-23 · TA获得超过472个赞
知道小有建树答主
回答量:310
采纳率:0%
帮助的人:237万
展开全部
<style type="text/css">
ul li { margin:0; padding:0; list-style:none;}
.nav ul li { float: left; padding-right:15px; }
.nav span { text-align:center;}
</style>
</head>
<body>
<div class="nav">
<UL>
<li>菜单<br/><span>one</span></li>
<li>菜单<br/><span>two</span></li>
<li>菜单<br/><span>three</span></li>
<li>菜单<br/><span>four</span></li>
<li>菜单<br/><span>five</span></li>
<li>菜单<br/><span>six</span></li>
</UL>
</div>
追问


菜单|
菜单|
菜单|

VIEWPOINT
INDEX
CONTACT

这样总是上下对不齐 差一点。。
追答
按我写的不就对齐了吗?把中文和英文写在同一个li里面就可以了。用span分开,用把span强制转行。这样代码最简洁
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
hanpu1802
2013-01-22 · TA获得超过338个赞
知道小有建树答主
回答量:369
采纳率:0%
帮助的人:423万
展开全部
<div>
<ul>
<li></li><li></li><li></li><li></li>
</ul>
<ul>
<li></li><li></li><li></li><li></li>
</ul>
严格定义#div .ul div .ul .li的大小
追问
我知道这么写  主要是 下面的英文长短不一即使我给li 定义了宽度  也还是上下对不齐啊
追答
我的意思是.ul .li的宽度统一定义,也就是等宽,这样上下不就对齐了吗
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式