0

助けてください。黄色のボックスのテキストとボタンを左右に配置し (左側のテキスト - マージン 20 px; 右側のボタン - マージン 20 px)、フッターのメニューを黄色のボックスに揃えたいと考えています。

画像追加できません、すみません。

編集: JSFiddle を追加 - http://jsfiddle.net/wqBEf/

これは私のcssコードです：

        #page
    {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid red;
        background-color: blue;
    }

    #page > #main
    {
        border: 1px solid #000;
        width: 650px;
        margin-left: auto;
        margin-right: auto;
        background: white;
        border-radius: 5px;
        margin-top: 20px;
    }

    #main > #inner
    {
        margin: 20px;

    }

    #page-title h1
    {
        font-size: 24px;
        text-align: center;
    }

    #footer-hotline
    {
        height: 50px;
        background-color: rgb(255,207,0);
        border-radius: 5px;
        box-shadow: 0px 3px 3px #999999;

        margin-top: 20px;
        border: 1px solid #000;
        width: 650px;
        margin-left: auto;
        margin-right: auto;

        position: relative;
        z-index: 2;
    }

    #footer-hotline > .part
    {
        float: left; width: 33%;
        margin-left: 20px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
    }
    #footer-hotline > .part input
    {
        vertical-align:middle;
    }

    #footer
    {
        margin-top: -25px;
        height: 100px;
        line-height: 25px;
        background-color: white;
        text-transform: uppercase;
        border: 1px solid black;
    }

    #footer > .link
    {
        float: left;
        border-right: 1px solid #000;
        margin-top: 50px;
    }

    #footer > .link > div
    {
        margin-left: 5px;
        margin-right: 5px;
    }

そして、これは私のhtmlコードです:

<div id="page">
<div id="main">
    <div id="inner">
        <div id="page-title">
            <img src="myLogo.png" alt="Schulz logo" />
            <h1>Some title</h1>
        </div>
        <div id="content">RenderBody</div>        
    </div>
    <div class="f-c"></div>       
</div>
<div id="footer-hotline">
    <div class="part">Hotline: 0800/888 888</div>
    <div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div> 
<div class="f-c"></div>
<div id="footer">
    <div class="link"><div><a href="#">GTC</a></div></div>
    <div class="link"><div><a href="#">About</a></div></div>
    <div class="link"><div><a href="#">Help</a></div></div>
    <div class="link"><div><a href="#">Language</a></div></div>
</div>

回答、提案、コメントをありがとう。

4

2 に答える 2

1

更新については、 http：//jsfiddle.net/wqBEf/1/を参照してください。

注目すべき変更。

  • フロート用とテキスト配置用にそれぞれ設定されたクラスを追加left align-leftしました。right align-right
  • display: inlineアイテムのリストを水平方向に中央揃えにするのが最も簡単な方法であるため、リンクをに設定しました。

これらが主な2つの変更でした。残りの変更は、マージンの削除/追加など、上記の2つをサポートするためだけのものでした。

于 2012-12-20T18:35:52.420 に答える
0

2つのアイテムを連携させる問題に疑似クラスを使用できます:first-child（これは、一度に2つしかない場合にのみ機能します）。IE7に戻ることも十分にサポートされています

float:rightまた、、、、direction:rtlおよびmargin-right：を実装する必要があります。

#footer-hotline > .part
{
    float: right; width: 33%;
    direction: rtl;             
    margin-right: 20px;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
}
#footer-hotline > .part:first-child
{
    direction: ltr;
    float: left;      
    margin-left: 20px;
}

ナビゲーションを中央に配置するには、 EliGassertの回答で十分です。

ソース： http： //jsfiddle.net/YZ2Uz/
デモ： http： //jsfiddle.net/YZ2Uz/show

于 2012-12-20T18:40:40.010 に答える