CSS元素定位

Question

我坦率地承认，我一点设计能力都没有。尽管如此，我还是发现自己在通过CSS来创建一个简单的网站。我遇到了一个问题，无论如何我都搞不清楚这个问题。基本的..。

我有一个包含整个页面并设置边界的<div>。宽度设置为1200px。在其他元素之后，我有一个横跨整个页面宽度的链接栏。这是一个id为"pinkbar“的<div>。"pinkbar“的宽度设置为100%，这将是包含分割的1200px的100%。我在左边创建了较小的填充，在右边创建了较大的填充，以正确地定位栏中的元素。我需要在左边添加一个元素，一个简单的文本电话号码，然后向右边添加几个链接。我将电话号码放在自己的<div>中，id为"pinkphone"，并将该<div>放在左边。工作得很完美。现在我开始添加链接。我为第一个链接创建了一个名为“<div>”的测试，在分区内添加了一个边框和文本链接，并将其浮动到右侧。这就是思维停止发挥作用的地方。链接分区，"pinktest"，在它所包含的分区的边界之外向右浮动大约50px，如果你考虑填充的话，在该边界之外向右浮动大约100px。我已经尽我有限的能力去玩弄和修补它，却没有找到任何爱。如果有人可以提供一个建议，如何使这项工作，请这样做。我仍然需要添加另外四个链接，所有链接都漂浮在右边，还有一个"pinktest“链接。相关代码如下：

CSS：

#pinkbar{
    background-image: url(../visual/pinkMenuBar.jpg);
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 100px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 25px;
}

#pinkphone{
    padding-top: 3px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    float: left;
    width: auto;
    height:25px;
}

#pinktest{
    padding-top: 3px;
    padding-left: 4px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: grey;
    float: right;
    width: auto;
    height:25px;
}

HTML：

<div id="pinkbar">
    <div id="pinkphone">
        <span class="cambria3black">Tel: 416 450 4460</span>
    </div>
    <div id="pinktest">
        <span class="cambria3black">
            <a href="testimonials.html">Testimonials</a>
        </span>
    </div>
</div> 

Answer 1

以下是我认为您可能正在寻找的简化示例：

HTML：

<nav>
    <ul class="links">
        <li>Link 1</li>
        <li>Link 2</li>
    </ul>
    <ul class="info">
        <li>Telephone Number</li>
        <li>Link 3</li>
    </ul>
</nav>

CSS：

nav {
    padding: 1em;
}

.links {
    float: left;
}

.info {
    float: right;
}

nav li {
    display: inline;
    padding: 1em;
}

您可以添加任意数量的链接。

Demo

Answer 2

浮动元素将尽可能向左或向右移动。通常，这意味着一直到包含元素的左侧或右侧。

CSS W3schools

因此，实际上，pinktest div位于pinkbar分区内。您应该将pinktest的css更改为：

float: left;

因为pinkbar div使用了100%的页面，所以pinktest会尽可能的正确。现在它将尽可能地向左转，即。在pinkphone旁边。