Question

所以，我试图在这个标题页下面有两个“导航”的东西，一个漂浮在左边，另一个漂浮在右边。

出于某种原因，除非我做错了，否则他们不会像他们应该的那样彼此相邻。代码如下：

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;
}

我暂时有边界所以我可以看到事情的位置，但是......是的。我需要把它们漂浮在一起，我想我做错了。有什么想法吗？

Answer 1

看哪！ http://jsfiddle.net/QHeDZ/

我已将display:inline-block添加到您的.landing-links-left和.landing-links-right css，并删除了您的花车。我想这就是你想要做的事情？如果没有，请告诉我！我可以解决它。

Answer 2

在关闭此div <div id="clear"></div>

之前添加<div id="landing-links">

#landing-links-right {
     font-size: small;
     text-align: right;
     width: 400px;
     float: right; //modify this to left(so it could be next to the other container)
}

希望这对你有所帮助！干杯！

Answer 3

从技术上讲，它们位于同一条线上，但没有明确定义边距和线高值以便更好地对齐。包括以下属性：

#landing-links-left { line-height: 20px; }
#landing-links ul {
    margin: 0;
    line-height: 20px;
}

Answer 4

您将获得顶部（和底部）边距的楔形作为浏览器默认值。如果您在Chrome中检查无序列表，则可以从用户代理样式表中看到：

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

您可以将列表中的边距设置为0以删除此默认值。另外，我建议您查看http://necolas.github.io/normalize.css/，它为常见元素提供了一组很好的默认规则，从而避免了这些问题。

需要这两个<div>并排</div>

4 个答案: