我需要在div中放置我的導航欄

我嘗試了所有從文本對齊到設置邊距的操作。我想讓導航欄水平居中並在垂直div的底部。我需要在div中放置我的導航欄

HTML：http://www.joekellywebdesign.com/businesssample/index.html

<div id="navbar"> 
      <ul id="MenuBar1" class="MenuBarHorizontal"> 
       <li><a class="MenuBarItemSubmenu" href="projects.html">Projects</a> 
       <ul> 
        <li><a href="restaurant.html">Restaurant</a></li> 
        <li><a href="house.html">House</a></li> 
        <li><a href="mall.html">Mall</a></li> 
       </ul> 
      </li> 
       <li><a href="about.html">About</a></li> 
       <li><a class="MenuBarItemSubmenu" href="services.html">Services</a> 
       <ul> 
        <li><a class="MenuBarItemSubmenu" href="residential.html">Residential</a> 
        <ul> 
         <li><a href="housing.html">Housing</a></li> 
         <li><a href="storage.html">Storage</a></li> 
        </ul> 
       </li> 
        <li><a href="business.html">Business</a></li> 
        <li><a href="government.html">Government</a></li> 
       </ul> 
      </li> 
      <li><a href="contact.html">Contact</a></li> 

      </ul> 
     </div>

CSS：http://www.joekellywebdesign.com/businesssample/css/styles.css

/* CSS Document */ 


* { 
    margin:0px; 
    padding:0px; 
    } 

body { 
    background-color:#FF0; 
    } 

#wrapper { 
    width:900px; 
    margin:10px auto; 
    background-color:#FFF; 
    } 

#logo { 
    float:left; 
    width:200px; 
    background-color:#FFF; 
    } 

#navbar { 
    float:right; 
    text-align:center; 
    width:700px; 
    margin: auto; 
    background-color:#FFF; 
    }

來源

2013-10-04 Joe Elmore

_「在div底部」._哪個div？ – j08691

導航欄div。 –

你確定你不是指#top div？ – j08691

你可以用這個試試，

ul.MenuBarHorizontal { 
    cursor: default; 
    font-size: 100%; 
    list-style-type: none; 
    margin: auto; 
    padding: 0; 
    width: 512px; 
}

其次，按照你的設計，導航欄結束正是你ul結束，

所以你可以試試這個

#navbar { 
    background-color: #FFFFFF; 
    float: right; 
    margin: auto; 
    margin-top: 49px; 
    text-align: center; 
    width: 700px; 
}

來源

2013-10-04 15:53:15

這並不會讓它粘在父級的底部。 – BetaBlaze

這沒有奏效 –

嘗試更新的答案 –

你可以做這樣的事情：

<style type="text/css"> 
    div#container { 
     position:relative; 
     width: 500px; 
     height: 300px; 
     border: 1px solid black;  
    }  
    div#menu-container { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
    }  
    div#menu { 
     position: relative; 
     text-align: center;  
    } 
</style> 
<div id="container"> 
    <div id="menu-container"> 
     <div id="menu"> 
      Hello World! 
     </div> 
    </div> 
</div>

的示範退房this jsFiddle。

來源

2013-10-04 15:57:34

使用絕對位置將很容易得到它的底部：

你會將此到#navbar：position: absolute; bottom: 0px;
然後你會將此父：position: relative;

但是，現在您已經應用了絕對位置，您應該使用類似的技術將其居中居中。由於您的導航欄是700px，我們可以使用一些數學來使用相同的絕對位置對其進行居中。

你會將此到#navbar：left: 50%; margin-left: -350px;
工作例如：http://jsfiddle.net/ky9av/

來源

2013-10-04 15:59:02 BetaBlaze

你可以試試這個。

ul.MenuBarHorizontal { 
margin-top: 8%; 
float: right; 
}

來源

2013-10-04 16:10:41 vishalkin

我需要在div中放置我的導航欄

回答

相關問題