0

Apple.com のメイン ナビゲーション メニューに似た効果を css を使用して作成する必要があります。

左側にリスト、右側に検索ボックスを配置します。検索ボックスをクリックすると、リストが縮小し、テキスト ボックスが拡大します。

私のリストとの違いは、アイテムが左揃えになり、中央に配置されず、それぞれの右側に均等な量のマージン/パディングが必要になることです。

Apple は、これには機能しないテーブル スタイルのレイアウトを使用しています。

これを達成する方法について他のアイデアはありますか？

ここに私がいるところがあります：http://jsfiddle.net/h8gCd/6/

<div>
    <ul>
        <li><a href="#"><span>Link 1</span></a></li>
        <li><a href="#"><span>Link 2</span></a></li>
        <li><a href="#"><span>Link 3</span></a></li>
        <li><a href="#"><span>Link 4</span></a></li>
        <li class="last"><a href="#"><span>Link 5</span></a></li>
    </ul>
    <form>
        <input type="text" />
    </form>
</div>


div {
    width: 100%;
    background: #e1e1e1;
    float: left;
    padding: 10px 0;
    width: 820px;
}

ul {
    float: left;
    width: 600px;
    padding: 0;
    margin: 0;
    background: red;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000
}
a:hover {
    color: #444
}

li {
    list-style-type: none;
    float: left;
    margin-right: 77px;
}

li.last {
    margin-right: 0;
}

form {
    float: right;
    width: 200px;
    background: green;
}

input {
    width: 194px;
    transition: all 0.2s ease-in-out;
}

input:focus {
    width: 250px;
}
4

1 に答える 1

1

Apple の Web サイトでは、この効果を実現するためにdisplay: tableとを使用しています。display: table-cell

http://jsfiddle.net/h8gCd/7/

div {
    width: 100%;
    background: #e1e1e1;
    float: left;
    padding: 10px 0;
    width: 820px;
}
ul {
    display: table;
    width: 600px;
    padding: 0;
    margin: 0;
    background: red;
}
a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000
}
a:hover {
    color: #444
}
li {
    display: table-cell;
    margin-right: 77px;
    width: 20%;
}
li.last {
    margin-right: 0;
}
form {
    background: green;
}
input {
    width: 194px;
    transition: all 0.2s ease-in-out;
}
input:focus {
    width: 250px;
}

<div>
    <ul>
        <li><a href="#"><span>Link 1</span></a>
        </li>
        <li><a href="#"><span>Link 2</span></a>
        </li>
        <li><a href="#"><span>Link 3</span></a>
        </li>
        <li><a href="#"><span>Link 4</span></a>
        </li>
        <li class="last"><a href="#"><span>Link 5</span></a>
        </li>
        <li>
            <form>
                <input type="text" />
            </form>
        </li>
    </ul>
</div>
于 2013-05-10T19:39:26.547 に答える