CSS 元素定位

Question

我坦率地坦承，我连一点设计能力都没有。尽管如此，我发现自己通过 CSS 来破解一个简单的网站。我遇到了一个问题，我一生都无法弄清楚这个问题。基础...

我有一个 <div>包含整个页面并设置边界。宽度设置为 1200px。在其他元素之后，我有一个跨越页面宽度的链接栏。这是在 <div> ID为“pinkbar”。 “pinkbar”的宽度设置为 100%，这将是 1200px 包含分区的 100%。我在左侧创建了小填充，在右侧创建了较大填充，以正确定位栏内的元素。我需要在左侧添加一个元素，一个简单的文本电话号码，然后在右侧添加几个链接。我把电话号码放在自己的<div>使用“pinkphone”的 ID，并 float <div>向左转。工作完美。现在我开始添加链接。我创建了一个 <div>为第一个链接命名为“pinktest”，在分区内添加边框和文本链接并将其 float 到右侧。这就是 thinks 停止播放的地方。链接部分“pinktest”向右浮动约 50px，超出其包含的部分边界，如果考虑填充，则向右浮动约 100px。我已经尽我最大的能力去玩和修补这个，但根本没有找到爱。如果有人可以就如何进行这项工作提出建议，请这样做。我还需要添加四个链接，所有链接都正确 float ，连同“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