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

html-css021

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

上下两行导航的时候定义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>

不需要改用padding,直接在li里面加多一个display:inline即可,改成下面这样

.prdlist li{

margin:16px

width:300px

float:left

display:inline

}

你的代码错了~~

<li><a title='福州长乐机场候机室' href='ProductsView.asp?id=301' target='_self'><img src=UploadFile/2012_4_22_26821_16533.jpg /><a></li>

<li><a title='莆田悦莱旗舰店' href='ProductsView.asp?id=303' target='_self'><img src=UploadFile/2012_4_22_47766_16916.jpg /><a></li>

<li><a title='福建华电可门港储运有限公司' href='ProductsView.asp?id=304' target='_self'><img src=UploadFile/2012_4_22_96181_15942.jpg /><a></li>

<li><a title='长乐枫华休闲农庄' href='ProductsView.asp?id=313' target='_self'><img src=UploadFile/2012_4_22_35029_195931.jpg /><a></li>

<a></li>

</li>前面的这个a是要用闭合的写法才行,改成</a>