1

ここで少し助けが必要です:)

私はこのレイアウトを持っています: http://jsfiddle.net/eyTYF/

ul5のみli'sで、すべてaタグが内側にあります。

そして、これらすべての要素が画面の幅の 100% を占めるようにし、アイコンはそのサイズ (50px) を維持し、タイトルだけでサイズを区別します。

どうやってやるの？

前もって感謝します ：）

4

3 に答える 3

0

解決策として、中央<li>の幅を 100% に設定してから、アイコンごとに 50px を差し引くことができます。z-index中央の div を他の div の後ろに配置するように設定する必要があります。

作業例！

コードの結果は次のとおりです。

    li {
        float: left;
        width: 50px;
        height: 50px;
        text-align: center; 
        position:relative;         /*To make z-index work*/
        z-index:1
}

    li:nth-child(3){
        background: blue;
        width:100%;                  
        margin: 0 -100px 0 -100px;   /* Subtract 100px for each side */
        position:relative;           /*To make z-index work*/
        z-index:0
    }
于 2013-05-29T14:42:51.360 に答える
0

マークアップを少し変更する場合は...

<ul>
    <li><a href="#"><i>Icon 1</i></a></li>
    <li><a href="#"><i>Icon 2</i></a></li>
    <li><a href="#"><i>Icon 3</i></a></li>
    <li><a href="#"><i>Icon 4</i></a></li>
    <li><a href="#"><span>Title</span></a></li>
</ul>

と

ul {list-style: none; padding-left: 0; width: 100%;}
li{height: 50px;text-align: center;}
li:nth-child(1){
    background: red;
    width: 50px;
    float: left;
}
li:nth-child(2){
    background: green;
    width: 50px;
    float: left;
}
li:nth-child(5){
    background: blue;
clear: none

}
li:nth-child(4){
    background: green;
    width: 50px;
    float: right;
}
li:nth-child(3){
    background: red;
    width: 50px;
    float: right;
}
a{color: white; display: block; width: 100%;vertical-align: middle;line-height: 50px;}

フィドル: http://jsfiddle.net/d3ufR/

于 2013-05-29T14:38:34.203 に答える