Question

我是HTML / CSS的新手，所以请不要伤害我：）

如何以导航为中心？我尽可能多地研究......

CSS：

#navigation ul {
    font-family:Arial;
    list-style-type:none;
    margin:0;
    padding:0;
    width:auto;
    height:auto;
    text-align:center;
}
#navigation ul li {
    display:inline-block;
    margin-right:-2px;
    position:relative;
}
#navigation ul li a {
    display:inline-block;
    padding:5px 10px;
    background:#ccc;
    color:#000;
    text-decoration: none;
}
#navigation ul li a:hover {background: #666;}
#navigation ul ul {
    position:absolute;
    left:0;
    width:200px;
    transition:all .5s; 
    max-height: 0;
    overflow: hidden;
}
#navigation ul.submenu li {
    display:block;
}
#navigation ul.submenu li a {
    display:block;
    background:#fff;
    color: #000;
}
#navigation ul.submenu li a:hover {background: #333;}
#navigation ul li:hover ul {
    max-height: 10000px;
}
#navigation li {
    font-family:Arial;
    font-size:11px;
    display:inline;
    float:left;
    background-color:#FFF;
}
#navigation a {
    display:block;
    width:60px;
    background-color:#FFF;
}
#navigation.center {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
#navigation {
    disply:inline-block;
    height:50px;
}

HTML：

<div id="navigation">
    <ul>
        <li><a href="#">Aperture Science</a>
            <ul class="submenu">
                <li><a href="#">GLaDOS</a></li>
                <li><a href="#">Testing Chambers</a></li>
                <li><a href="#">The Player (Chell)</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li><a href="#">Black Mesa</a>
            <ul class="submenu">
                <li><a href="#">The Combine</a></li>
                <li><a href="#">The Resistance</a></li>
                <li><a href="#">The Player (Gordon Freeman)</a></li>
            </ul>
        </li>
    </ul>
</div>

任何帮助都会很棒！谢谢！（是的，我的首发网站是在半条命和门户网站上）

Answer 1

您需要通过应用宽度并使用css：

设置其margin属性来调整导航Div

#navigation{
  width:50%;
  margin:0 auto;
}

请refer to fiddle进行演示

Answer 2

您可以尝试使用以下html代码和css

HTML：

<div id="navMenu">
        <ul>
            <li>
                <a href="#">Black Mesa</a>
                <ul>
                    <li><a href="#">GLaDOS</a></li>
                    <li><a href="#">Testing Chambers</a></li>
                    <li><a href="#">The Player (Chell)</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Black Mesa</a>
                <ul>
                    <li><a href="#">The Combine</a></li>
                    <li><a href="#">The Resistance</a></li>
                    <li><a href="#">The Player (Gordon Freeman)</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#navMenu {
            margin: 0;
            padding: 0;
            text-align: center;
        }

            #navMenu ul {
                margin: 0;
                padding: 0;
                line-height: 30px;
                display: inline-block;
            }

            #navMenu li {
                margin: 0;
                padding: 0;
                text-align: left;
                float: left;
                list-style: none;
                position: relative;
                background-color: #999;
                border-radius: 5px;
            }

            #navMenu ul li a {
                text-align: center;
                text-decoration: none;
                height: 30px;
                width: 150px;
                display: block;
                color: #FFF;
                border: 1px solid #FFF;
                text-shadow: 1px 1px 1px #000;
            }

            #navMenu ul ul {
                position: absolute;
                visibility: hidden;
                top: 32px;
            }

            #navMenu ul li:hover ul {
                visibility: visible;
            }

            #navMenu li:hover {
                background-color: #09F;
            }

            #navMenu ul li:hover ul li a:hover {
                background-color: #CCC;
                color: #000;
            }

            #navMenu a:hover {
                color: #000;
            }

小提琴：http://jsfiddle.net/Khumesh/adx2g1z0/

CSS - 如何将导航栏居中？

2 个答案: