0

私は、デザイン能力に恵まれていないことを率直に認めます。それにもかかわらず、単純な Web サイトの CSS をハッキングしていることに気づきました。私は問題に遭遇しましたが、私の人生では問題を理解できません。基礎...

ページ全体を<div>含み、境界を設定する があります。幅は 1200px に設定されています。他の要素の後に、ページの幅にまたがるリンク バーがあります。これは<div>、ID「pinkbar」の にあります。「ピンクバー」の幅は 100% に設定されています。これは、1200px を含む区画の 100% になります。バー内に要素を適切に配置するために、左側に小さなパディングを作成し、右側に大きなパディングを作成しました。左側に 1 つの要素、単純なテキストの電話番号、右側にいくつかのリンクを追加する必要があります。<div>私は「pinkphone」のIDで電話番号を独自に入れ、それ<div>を左に浮かせました。完璧に機能しました。次に、リンクの追加を開始します。私は<div>最初のリンクに「pinktest」という名前を付け、境界線とテキスト リンクを分割内に追加し、右にフロートさせました。そして、それが思考がうまく機能しなくなった場所です。リンク部分「pinktest」は、パディングを考慮に入れると、それが含まれている部分の境界線を超えて約 50 ピクセル、右に約 100 ピクセルの境界線を超えて右に浮動します。私は自分の限られた能力を最大限に発揮してこれをいじり回しましたが、まったく愛を見つけられませんでした。誰かがこの作業を行う方法について提案を提供できる場合は、してください。さらに 4 つのリンクを追加する必要があります。すべて右にフロートし、「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>
4

2 に答える 2

0

フローティング要素は、可能な限り左または右に移動します。通常、これは包含要素の左側または右側を意味します。

CSS W3schools

実際には、pinktest div は pinkbar ディビジョン内にあります。pinktest の css を次のように変更する必要があります。

float: left;

pinkbar div はページの 100% を使用しているため、pinktest は可能な限り右に移動します。これで、可能な限り左に移動します。ピンクフォンの隣。

于 2013-03-01T23:13:45.690 に答える
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 に答える