0

我想设计菜单栏，如下所示，我已经在 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
}

在此处输入图像描述

4

3 回答 3

0

首先，你不能有多个元素具有相同的 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 高，并且元素也有“更高”的等级，他会比其他人更高；]

于 2013-08-23T08:10:05.877 回答
0

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

于 2013-08-23T08:12:16.263 回答
0

您可以通过 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>
于 2013-08-23T10:09:19.737 回答