Question

我在前面自由地承认，即使是一点点的设计能力，我也不是很幸运。尽管如此，我发现自己正在通过CSS浏览一个简单的网站。我遇到了一个问题，对于我的生活，我无法弄清楚这个问题。基础......

我有<div>，其中包含整个页面并设置边界。宽度设置为1200px。在其他元素之后，我有一个跨越页面宽度的链接栏。这是<div>，ID为“pinkbar”。 “pinkbar”的宽度设置为100％，这将是1200px包含分区的100％。我在左边创建了小填充，在右边创建了较大的填充，以便在栏中正确定位元素。我需要在左边添加一个元素，一个简单的文本电话号码，然后在右边添加几个链接。我将电话＃放在它自己的<div>中，其ID为“pinkphone”，并将<div>向左浮动。工作得很完美。现在我开始添加链接。我为第一个链接创建了一个名为“pinktest”的<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

所以事实上，粉红色的div是在pinkbar部门内部。你应该将pinktest的css更改为：

float: left;

因为pinkbar div正在使用100％的页面，所以pinktest将尽可能地正确使用。现在它会尽可能地离开，即。粉红色电话旁边。

CSS元素定位

2 个答案: