2

对正在建设的网站有疑问。网站的 Header 部分在其中包含 3 个应该在同一行中的 div。左侧 1 个，屏幕中间 1 个，右侧 1 个。页眉宽度为 100%。

#header {
background-color:#352618;
height: 100px;
width:100%;
}

和里面的三个div：

#logo
{
float:left;
width:200px;
height:80px;
margin-top:6px;
margin-left:20px;
}

#Menu {
font-size:17px;
margin: 0 auto;
padding-top:20px;
width:100%; /** before it was 850 px **/
}

#LanguageSelect
{
float:right;
width:120px;
height:80px;
font-size:14px;
padding-top:60px;
padding-right:10px;
}

好的，现在的问题是：菜单部分是标题的菜单，它是一个<li>下拉<ul>菜单。代码：

   <div id="Menu" class="text_blue">
    <ul id="menu_noya">
        <li class="head_item">
            <a href="mine.html?search_engines">Women</a>
                <ul>
                    <li><a href="http://google.com/">Google</a>                         </li>
                    <li><a href="http://yahoo.com/">Yahoo</a>       </li>
                    <li><a href="http://live.com/">Live        Search</a></li>
                </ul>
        </li>
   </ul>
   </div>

结果是Logo放好了，LanguageSelect没问题，但是菜单粘在左边而不是在屏幕中间，为什么？因为为了使<li>and<ul>在同一行中，我需要使用 afloat:left所以菜单可以在同一行中。

我该怎么做才能让它在中间而不使用float:left？

  • 另一个问题：我正在使用这种字体：Hiragino Mincho Pro，当字体 < 18px; 它看起来不太好，就像它没有反上市一样。

以下是它的一般外观示例。 http://jsfiddle.net/GEKkf/

非常感谢您的帮助和阅读！埃尔罗伊。

4

3 回答 3

2

添加以下类：

小提琴

#header {
    text-align: center;
}

#Menu {
    display: inline-block;
    font-size: 17px;
    padding-top: 20px;
}

另外，对于另一种方法，请参阅我的答案here。

于 2013-07-15T16:19:15.537 回答
0

您需要将 CSS 文件中的 li.head_item:hover ul 条目更改为以下内容：

li.head_item:hover ul { 
position: absolute;
 display: block; 
 width: 142px;
 background-color: #e9e9e9;
}
于 2013-07-15T16:39:23.987 回答
0

将所有三个 divfloat: left;放入并将它们设置为 33% 的宽度（或者如果你愿意，可以低于 33% 的一小部分）

然后添加一个 html 元素，该元素具有clear:both;after 以确保将页面的其余部分向下推。:after如果您愿意，也可以使用 css 。

于 2013-07-15T14:38:32.917 回答