0

我已经尝试了从文本对齐到设置边距的所有方法。我希望导航栏水平居中并垂直位于 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;
   }
4

4 回答 4

0

你可以试试这个。

ul.MenuBarHorizontal {
margin-top: 8%;
float: right;
}
于 2013-10-04T16:10:41.650 回答
0

你可以这样做：

<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>

查看这个 jsFiddle进行演示。

于 2013-10-04T15:57:34.627 回答
0

你可以试试这个，

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-04T15:53:15.743 回答
0

使用绝对位置很容易将其拉到底部：

  1. 您可以将此应用于#navbar：position: absolute; bottom: 0px;
  2. 然后您将其应用于父级：position: relative;

但是，既然您已经应用了绝对位置，您应该使用类似的技术将其水平居中。由于您的导航栏是 700 像素，我们可以使用一些数学方法使用相同的绝对位置将其居中。

  1. 您可以将此应用于#navbar：left: 50%; margin-left: -350px;
  2. 工作示例：http: //jsfiddle.net/ky9av/
于 2013-10-04T15:59:02.677 回答