Question

我是html和css的新手，我开始创建自己的网站，我遇到了一个问题，我的导航栏占据了整个页面的宽度，我想添加以我的垂直方向为中心的页面内容导航栏。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
        <div class="logoBar">   
            <div class="helper">        
                <div class="logo"></div>
            </div>
        </div>

        <div id="vmenu"> 
            <ul> 
              <li><a href="">Acceuil</a></li> 
              <li><a href="">Identification</a></li> 
              <li><a href="">Mon Parcours</a></li> 
              <li><a href="">Ma Formation</a></li> 
              <li><a href="">Mes Projets</a></li> 
              <li><a href="">Dossier de Veille</a></li> 
              <li><a href="">Contact Me</a></li> 
            </ul>   
        </div> 

        <div class="content">
        </div>

</body>
</html>

的CSS：

body{
    background:url(../img/bg.png) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    margin:0 ;
    padding:0;
    height: 100%;
    width: 100%;
}

.logoBar{ 
    background:url(../img/LogoBar.png) ;
    height:150px;   
    position:relative;

}

.helper{
    height:120px;
    width:100%;
    display: table;
}

.logo{  
    background:url(../img/Untitled-1.png) no-repeat center;
     width:262px;
     height:80px;
     margin:0 auto;
     display: table-cell;
     vertical-align: middle;
}




div#vmenu { 
   margin: 0; 
   padding: .25em 0em .25em 0em; 
   border: solid 1px #30c9e0; 
   background: #7895A2; 
   width: 13.5em; 

} 

div#vmenu ul { 
   margin: 0; 
   padding: 0; 
   list-style: none;


} 

div#vmenu ul li { 
   margin: 0; 
   padding: 0; 
   list-style: none; 

} 

div#vmenu ul a:link { 
   margin: 0; 
   padding: .2em 0em .2em .4em; 
   text-decoration: none; 
   font-size:17pt;   
   background-color: #7895A2; 
   color: #0059a0; 
   display: block; 

} 

div#vmenu ul a:active { 
   margin: 0; 
   padding: .25em .5em .25em .5em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size:17pt;
   background: #4d8cba; 
   color: #ffffff; 
   display: block; 
} 

div#vmenu ul a:visited { 
   margin: 0; 

   text-decoration: none; 
   font-weight: bold; 
   font-size:17pt; 
   background: #4d8cba; 
   color: #ffffff; 
   display: block; 
} 

div#vmenu ul li a:hover { 
   margin: 0; 
   padding: .2em 0em .2em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size:17pt;
   background-color: #30c9e0; 
   color: #ffffff; 
   display: block; 
} 


.content{
  width: 700px ;
  height:50px;
  margin-left: auto ;
  margin-right: auto ;
  border: 1px solid black;
  background-color:black;
  text-align:center;

}

Answer 1

div元素为display: block;，表示其宽度为100％。只需为导航设置宽度即可。

Answer 2

不确定你是否想要这个。

在你的css中更新此内容

div#vmenu { 
   margin: 0; 
   padding: .25em 0em .25em 0em; 
   border: solid 1px #30c9e0; 
   background: #7895A2; 
   width: auto; 
   float:left;

}

我希望这是你想要的。

垂直导航栏占据页面的整个宽度

2 个答案: