Question

我想设计菜单栏如下图所示，我已经在ul中创建了整个列表，但是如何为中心设置不同的高度和宽度。请帮助我尝试下面的代码，但中间部分没有增加，

<nav id="Edit_panel">
            <ul>
                <li class="menubar" title="redo">
                    <div id="link">redo</div>
                </li>
                <li class="menubar" title="undo">
                    <div id="link">undo</div>
                </li>
                <li class="menubar" title="cut">
                    <div id="link">Cut</div>
                </li>
                <li class="menubar" title="copy">
                    <div id="link">Copy</div>
                </li>
                <li class="menubar" title="paste">
                    <div id="link">paste</div>
                </li>

                <li class="menubar" title="select">
                    <div id="link">select</div>
                </li>
                <li class="menubar" title="hand">
                    <div id="link">hand</div>
                </li>
                <li class="menubar" title="zoomin">
                    <div id="link">zoomin</div>
                </li>
                <li class="menubar" title="zoomout">
                    <div id="link">zoomout</div>
                </li>
                <li class="menubar" title="addimage">
                    <div id="link">Add img</div>
                </li>
            </ul>
        </nav>

的CSS：

    #Edit_panel {
    background-color: gray;
    height:25px;
    display: inline;
}

ul
{
    background-color: #D8D8D8;
    height:30px;
}
li {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center
}

enter image description here

Answer 1

首先，您不能拥有多个具有相同ID的元素，因此您应该更改所有

id = "link"

到

class = "link"

或删除那些id

另一个错误是在css中将ul置于高度。 ul的30px高度意味着你希望整个列表高30px。您想要定义li元素的高度，而不是整个ul。

而不是：

ul
{
    background-color: #D8D8D8;
    height:30px;
}
li {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center
}

应该是：

ul
{
    background-color: #D8D8D8;
}
li {
    height:30px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    text-align: center
}

如果您希望某些元素具有不同的高度或宽度，可以向它们添加一些类，并为该类定义高度，例如：

<li class="menubar higher" title="paste">
    <div id="link">paste</div>
</li>

然后在CSS中添加：

.higher {
    height: 50px;
}

然后你的元素将是30px高，而且元素也有“更高”级别，他会比其他元素更高;]

Answer 2

只需将另一个类添加到要增加的元素并设置不同的高度。并删除重复的ID。

Answer 3

你可以通过jquery为你的元素赋予不同的高度。使用此演示。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<style>
.test
{
    height:25px;
}
</style>

<script>
$(document).ready(function(e) {
    $("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>

li标签的高度不同

3 个答案: