Question

我正在制作一个游戏网站，我正在使用DIV标签进行流派菜单。在制作菜单时，我发现我无法为菜单设置DIV元素的大小。我正在使用，如果这很重要。 HTML：

    <div class="center">
     <div class="menu" onclick="location.href='all.html';">All</div>
     <div class="menu" onclick="location.href='action.html';">Action</div>
     <div class="menu" onclick="location.href='arcade.html';">Arcade</div>
     <div class="menu" onclick="location.href='racing.html';">Racing</div>
     <div class="menu" onclick="location.href='rpg.html';">PRG</div>
     <div class="menu" onclick="location.href='skill.html';">Skill</div>
    </div>
    <div class="center">
     <div class="menu" onclick="location.href='strategy.html';">Strategy/Puzzle</div>
     <div class="menu" onclick="location.href='shooting.html';">Shooting</div>
     <div class="menu" onclick="location.href='sports.html';">Sports</div>
     <div class="menu" onclick="location.href='gamegarage.html';">GameGarage</div>
    </div>

CSS：

    body
    {
    background-color:black;
    color:rgb(0,255,0);
    font-family:"Comic Sans MS";
    font-weight:bold;
    }
    .center
    {
    text-align:center;
    }
    .menu
    {
    font-size:1.35em;
    display:inline;
    width:250px;
    cursor:pointer;cursor:hand;
    border:5px solid #00FF00;
    }
    div
    {
    margin-bottom:15px;
    }

有谁知道我做错了什么？谢谢你的帮助！

Answer 1

尝试将菜单标记的CSS更改为：

.center .menu
{
font-size:1.35em;
display:inline-block;
width:250px;
cursor:pointer;cursor:hand;
border:5px solid #00FF00;
}

您还应将onclick事件更改为window.location.href = "link"

Answer 2

使用

display:block

或

display:inline-block

而不是菜单类中的内联。

Answer 3

要修复div的宽度，您需要设置

.menu {
    display: inline-block;

现在你可以定义div的宽度，高度和垂直对齐。

    width: 250px; height: 1.4em; /* height: auto inherit 130px */
    vertical-align: middle;
}

如果你有一个外框'.center'，它是盒装的或内联框的，但是会像.menu那样高得多，它将在外部'.center'框的中间对齐。

无法定义DIV的宽度

3 个答案: