Question

对网站即时建设有疑问。网站的标题部分包含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>和<ul>在同一行中，我需要使用float:left，因此菜单可以位于同一行。

如果不使用float:left

，我可以做些什么才能让它处于中间位置？

另一个问题：我正在使用这种字体：Hiragino Mincho Pro，当字体是＆lt; 18像素;它没有好处，就像它没有抗反应一样。

以下是一般情况的示例。 http://jsfiddle.net/GEKkf/

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

Answer 1

添加以下类：

<强> FIDDLE

#header {
    text-align: center;
}

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

另外，换句话说，请参阅我的回答here。

Answer 2

将所有三个div放在float: left;中，并将它们设置为33％宽度（如果你愿意，可以将其设置为低于33％）

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

Answer 3

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

li.head_item:hover ul { 
position: absolute;
 display: block; 
 width: 142px;
 background-color: #e9e9e9;
}

连续3个div，中间1个但在div内有一个浮子

3 个答案: