Question

请问怎么用div+css写出横式导航栏？新手求指教。

Answer 1

<style>
    .nav { padding: 35px 0px; background: url(http://img0.bdstatic.com/img/image/ps-logo.png) no-repeat left center; }
    ul { list-style: none; width: 1024px; padding: 0px; margin: 0px auto; margin-top: 35px; overflow: hidden; }
    ul li { float: left; width: 180px; height: 30px; line-height: 30px; margin: 0px 10px; border: solid 1px #c00; text-align: center; border-radius: 3px; font-size: 14px; -webkit-transition: background-color 1s ease; -moz-transition: background-color 1s ease; -o-transition: background-color 1s ease; transition: background-color 1s ease; }
    ul li:hover { background-color: #c00; color: #fff; }
</style>
<div class="nav">
    <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>
</div>

Answer 2

<style>
.logo{float:left;}
.nav{float:right;}
.nav li{float:left;}
</style>
<div class="head">
    <div class="logo"></div>
    <div class="nav">
        <ul>
            <li><a href="#">栏目导航</a></li>
            <li><a href="#">栏目导航</a></li>
            <li><a href="#">栏目导航</a></li>
            <li><a href="#">栏目导航</a></li>
        </ul>
    </div>
</div>