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

苹果网站正在使用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 回答