0

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

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

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

我暂时有边界，所以我可以看到东西在哪里，但是……是的。我需要将它们彼此相邻浮动，我认为我做错了。有什么想法吗？

4

4 回答 4

1

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

我添加display:inline-block到您的.landing-links-left和.landing-links-rightcss 并删除了您的浮动。我想这就是你想要做的？如果没有，请告诉我！我可以修复它。

于 2013-10-18T16:30:41.440 回答
0

只需<div id="clear"></div>在关闭此 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)
}

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

于 2013-10-18T16:32:52.807 回答
0

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

#landing-links-left { line-height: 20px; }
#landing-links ul {
    margin: 0;
    line-height: 20px;
}
于 2013-10-18T16:34:35.780 回答
0

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

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

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

于 2013-10-18T16:35:51.193 回答