0

I freely admit right up front that I am not blessed with even a speck of design ability. Nonetheless, I find myself hacking through CSS for a simple website. I've run into a problem and for the life of me I can't figure out the issue. The basics...

I have a <div> that contains the entire page and sets the boundaries. The width is set at 1200px. After a other elements I have a links bar that spans the width of the page. This is in a <div> with the id "pinkbar". The "pinkbar" has a width set to 100%, which would be 100% of the 1200px containing division. I created small padding on the left and larger padding on the right to properly position elements within the bar. I need to add one element to the left, a simple text telephone number, and then several links to the right. I put the telephone # in it's own <div> with the id of "pinkphone", and floated that <div> to the left. Worked perfectly. Now I start to add the links. I created a <div> named "pinktest" for the first link, added a border and the text link inside of the division and floated it to the right. And that is where thinks stopped playing nicely. The link division, "pinktest", floats to right about 50px beyond the border of it's containing division, and about 100px to the right beyond that border if you factor in the padding. I've played and tinkered with this to the best of my limited ability and have found no love at all. If someone can offer a suggestion as to how to make this work please do. I still need to add four more links, all floated right, along with the "pinktest" one. Relevant code below:

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

The 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>
4

2 回答 2

0

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

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

您可以根据需要添加任意数量的链接。

演示

于 2013-03-01T22:54:00.833 回答
0

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

CSS W3schools

所以实际上，pinktest div 是在pinkbar 分区内。您应该将 pinktest 的 css 更改为：

float: left;

因为 pinkbar div 正在使用 100% 的页面，所以 pinktest 会尽可能地正确。现在它将尽可能向左移动，即。粉红电话旁边。

于 2013-03-01T23:13:45.690 回答