Impossible de définir la largeur d'un DIV

Question

Je crée un site Web de jeu et j'utilise la balise DIV pour le menu de genre. En faisant le menu, j'ai trouvé que je ne suis pas en mesure de définir la taille des éléments DIV pour le menu. J'utilise si ça compte. 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; 
    } 

Est-ce que quelqu'un sait ce que je fais mal? Merci pour votre aide!

Answer 1

essayez de changer votre CSS pour votre balise menu à ceci:

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

aussi vous devriez changer vos événements onclick à window.location.href = "link"

Answer 2

Utilisez

display:block 

ou

display:inline-block 

au lieu d'inline dans votre classe de menu.

Answer 3

Pour fixer la largeur d'une div, vous devez définir

.menu { 
    display: inline-block; 

Maintenant, vous pouvez définir la largeur de div, hauteur et vertical-align.

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

Si vous avez une boîte extérieure « de .center », c'est en boîte ou en boîte en ligne, mais sera beaucoup plus élevé en tant que .menu est, il sera aligné au milieu de l'extérieur « .center » boîte .