所以，我试图在这个标题页的东西下面有两个“一半”的导航东西，一个向左浮动，另一个向右浮动。
出于某种原因，除非我做错了什么，否则他们没有像应该的那样挨在一起。代码如下:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
我有暂时的边界，所以我可以看到东西在哪里，但是......是的。我需要将它们并排 float ，我认为我做的事情完全错误。有什么想法吗？
最佳答案
看哪! http://jsfiddle.net/QHeDZ/
我将 display:inline-block 添加到您的 .landing-links-left 和 .landing-links-right CSS 并删除了您的 float 。我想这就是你想要做的？如果没有，请告诉我!我可以解决它。
关于css - 需要并排放置这两个 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19454489/