Question

我正在尝试整理我的导航div。我遇到了各种各样的问题，而且我一直试图将它们整理好几个小时。我是菜鸟程序员，所以请原谅我。

首先，这是我的css的快照

#navigation { 
background: rgba(109, 183, 229, 1);
display: block; 
position: static;
height: 40px;
width: 96%; 
padding: 1% 2% 0% 2%;
clear: both;
border-style: solid;
border-color: #31679a;
border: 0% 0% 1% 0%;}

边框没有表现，因为即使我明确指定3面为0％，它也会一直显示。（已解决：更改为边框宽度，并将％更改为px，因为边框不允许％）
接下来我似乎无法将它完美地放在中间。我尝试了各种各样的东西，但我似乎无法让它正常运作。（解决：Magesh和Adam都为这个问题提供了很好的解决方案，但是Adam更容易实现我想要的结果）
在调整窗口大小时，我似乎无法得到它。这曾经有效，但经过几次修改后，它已经停止了。我希望它在宽度太小时消失。

我觉得这将是一个愚蠢的问题，答案将是一个很小的％，我忽略了。但它变得非常令人沮丧。（你可能还会注意到主体溢出了我已放在底部的边界 - 不知道为什么）。我会非常感谢你们的任何帮助。

www.dweeman.com/eb/sitetemplate.html

编辑：我已为您创建此fiddle

Answer 1

注意：此答案适用于您的居中问题

<强> HTML：

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Gallery</li>
</ul>

<强> CSS

ul{
    display:table;
    width:100%;   /*This ensures that the element covers the entire width*/
    text-align:center;   /*To center the text*/
    list-style:none;   /*Remove the bullets*/
    margin:0;   /*Remove margins*/
    padding:0;   /*Remove extra padding*/
}
ul li{
    display:table-cell;
}

请参阅此处 - 例如＆gt; Click here

警告：这只是一个例子，你可以更好地设计它。

直接解决方案：将此代码替换为您网站上的代码，它将完美运行：）

#ddmenu {
display: table;
width: 100%;
text-align: center;
background: #31679a transparent;
border-radius: 0.125em;
cursor: pointer;
color: #8aa8bd;
}
#ddmenu li{ 
display: table-cell;
font-size: 1.20em;
text-shadow: 1px 1px 0 #fff;
border-right: 0px solid #dae0e5;
}
#ddmenu li a {
display: block;
padding: 0 0.750em;
line-height: 1.40em;
font-weight: bold;
text-decoration: none;
color: #31679a;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

Answer 2

如果您从 #ddmenu 中删除 宽度：100％ ，然后输入 text-align： #navigation 上的中心 应该使菜单居中。

要使其在某个宽度处停止缩小，您可以使用最小宽度

#navigation {
    min-width:700px;
}

要使其在某个宽度上完全消失，您可以在css中使用媒体查询。将其插入主css的末尾。

@media only screen and (max-width: 700px){
    #navigation { 
        display:none;
    }
}

导航div的格式

2 个答案: