Question

enter image description here 如果你看截图，我需要在同一行上的'标题'，'副标题'和'社交媒体图标'，所以我将'标题'浮动到左边并将'社交媒体图标'浮动到右边，因为我想要它们位于最右端，但是当我给它一个向右的浮动时，它会破坏导航菜单（带圆圈的红色）的对齐方式，该菜单应该位于下方，并将其置于顶部。对此有何解决方案？以下是我的html5代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8" />
    <link href = "css/style.css" rel = "stylesheet" />
    <title>Test</title>
</head>
<body>
    <div id = "container">
        <header>
            <div id = "title">Test title</div>
            <div id = "subtitle">test subtitle</div>
            <div id = "socialmedia">
                <ul id = "socialicons">
                    <li>facebook</li>
                    <li>twitter</li>
                    <li>linkedin</li>
                </ul>
            </div>
        </header>
        <nav>
            <ul id = "mainmenu">
                <li>About Me</li>
                <li>My Portfolio</li>
                <li>Services Offered</li>
            </ul>
        </nav>
    </div>
</body>
</html>

这是css代码

#header{
height: 1000px;
}
#title{
float: left;
padding: 10px;
}
#subtitle{
float: left;
padding: 10px;
}
#socialicons{
padding: 10px;
float: right;
}
#socialicons li{
list-style-type: none;
display: inline;
}
#mainmenu li{
list-style-type: none;
display: inline;
}

Answer 1

您的header仅包含浮动元素。其height为0px。 nav就在这个0px标题之下。

所以，有两种方法可以解决这个问题：

1 /为标题提供固定的高度。

2 /使用clearfix。最好的是micro-clearfix。

cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

只需向.cf添加header课程，即可完成工作。

Answer 2

以下是您问题的另一种解决方案。

尽量让你的css简单干净。像左右一样使用类或id

示例：

 #left{float: left;}
 #right {float:right;}

解决您的问题：JsFiddle

Answer 3

以下是我根据您提供的解决方案：

// Add padding to the mainmenu
#mainmenu {
  padding: 10px;
}

// Remove the margin on socialicons
#socialicons {
  margin: 0;
}

http://jsfiddle.net/Ey3jx/

下面的导航：

#mainmenu {
  /* other rules */
  clear: both;
}

http://jsfiddle.net/Ey3jx/2/

CSS浮动并清除不能给出正确的结果

3 个答案: