CSS菜单从中心开始并继续向右

时间:2013-05-08 19:58:34

标签: css

我有以下css菜单,从中间开始并继续向右。这意味着奶油色条继续到页面的末尾。尝试搜索,但无法找到解决方案,也许不可能? enter image description here 我得到的HTML:

<header>
                    <nav class="splash-menu">
                        <ul class="splash-nav">
                            <li class="why-splash">Why us</li>
                            <li class="dealer-splash">Dealer Login</li>
                        </ul>
                        <div class="clearfix"></div>
                    </nav>
                </header>

CSS:

.splash-nav{
    list-style: none;
    margin: 0;
    padding: 0;
    background: #0B3543;
}
.splash-nav li{
    float: left;
    height: 60px;
}
.splash-menu{
    float:left;
   width:100%;
   overflow:hidden;
   position:relative;
}
.splash-menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:75%;
   text-align:center;
}
.splash-menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
.splash-menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   text-decoration:none;
   line-height:1.3em;
}

1 个答案:

答案 0 :(得分:0)

从图像中我建议,而不是从中间开始,菜单与保持它的元素的右边对齐。

http://www.w3schools.com/css/css_align.asp