與li標簽不同的高度

Question

我想如下所示設計菜單欄，我已經在ul中創建了整個列表，但是如何為center設置不同的高度，寬度。請幫助我嘗試以下代碼，但中間部分不會增加，

<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
}

Answer 1

首先，您不能有多個具有相同ID的元素，因此您應該更改所有

id = "link"

至

class = "link"

或刪除這些ID

---

另一個錯誤是將高度放在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;
}

然后您的元素將高30像素，並且元素巫婆也將具有“更高”的等級，他會比其他人更高；]

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>