Question

在CSS上有点新鲜并且一直在寻找各种网站和一些代码试图获得我设法得到的中心下拉菜单：）。

然而，只要我添加一些图像来组成标题，菜单就会向左移动，从那时起我就无法让它变得有用了，任何帮助？代码如下。

<style type="text/css">
<!--
body {
    background-image: url();
    background-color: #0099FF;
}
.style1 {color: #FFCC00}
.style2 {color: #FF9900}
.style3 {
    color: #FFCC00;
    font-weight: bold;
    font-size: 12px;
}
.style4 {
    color: #000099;
    font-weight: bold;
}
.style5 {color: #000099; font-weight: bold; font-size: 12px; }
.style6 {color: #000099}
        * { padding: 0; margin: 0; }
        body { padding: 5px; }
        ul { list-style: none; margin: auto}
        ul li { float: left; padding-right: 0px; position: relative; }
        ul a { display: table-cell; vertical-align: middle; width: 100px; height: 50px; text-align: center; background-color: #0099EE; color: #000000; text-decoration: none; border: 1px solid #000000;}
        ul a:hover { background-color: #0066FF; }
        li > ul { display: none; position: absolute; left: 0; top: 100%; }
        li:hover > ul { display: inline; }
        li > ul li { padding: 0; padding-top: 0px; }
        #menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;
    margin: 0 auto;
}


ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    }
    ul#horizontal-list li {
        display:inline
    }


-->
</style></head>

<body>  

  <div id="menu-outer"></div>
<div class="table"></div>
<div align="center"><img src="logo_with_words_3.jpg" width="172" height="145"><img src="heading.gif" width="557" height="69"><img src="logo_with_words_3.jpg" width="172" height="145">
</div>
<ul id="horizontal-list">
    <li>
      <a href="#">Home</a>
    </li>
        <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Guest Comments</a></li>
        </ul>
        <li><a href="#">News</a></li>
    <li><a href="#">Accommodation</a>
        <ul>
            <li><a href="#">Rooms</a></li>
            <li><a href="#">Bedrooms</a></li>
            <li><a href="#">St Joseph's Annexe</a></li>
        </ul>
    <li><a href="#">Visiting St Katharine's</a>
        <ul>
            <li><a href="#">Retreats</a></li>
            <li><a href="#">B&B</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Conferences</a></li>
            <li><a href="#">Catering</a></li>
        </ul>
  <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">Find Us</a></li>
        </ul>
  <li><a href="#">Walled Garden</a></li>
    <li><a href="#">Sue Ryder Legacy</a>
        <ul>
            <li><a href="#">Sue Ryder</a></li>
            <li><a href="#">Prayer Fellowship</a></li>
            <li><a href="#">LRWMT</a></li>

        </ul>
</ul>

</body>

Answer 1

您实际上并没有使用表格，但可以添加以下内容：#horizontal-list {margin: auto; width: 850px;}

JS Fiddle with your code

水平表需要居中

1 个答案: