我在试着做一个项目。
@charset "utf-8";
/* CSS Document */
body {
max-width: 890px;
margin:auto;
}
.logo {
font-size: 30px;
font-family: Sylfaen;
color: #FFF;
text-align: left;
padding-top: 30px;
padding-left: 10px;
padding-bottom: 100px;
line-height: 0px;
margin:auto;
width:890px;
height: 50%;
background:url(header2.jpg) no-repeat;
border-top-left-radius: 3%;
border-top-right-radius: 3%;
}
.SUB {
font-size: 18px;
text-shadow:1px 1px #000
padding-top: 30px;
}
.Titre {
font-family: Downcome;
-webkit-text-stroke: 1px black;
}
.main-menu ul {
margin: 0;
padding: 0px 0px;
list-style: none;
}
.main-menu ul li {
float: left;
width: 296.6px;
background-color: black;
text-color: white;
text-align: center;
font-size: 20px;
}
.main-menu ul li a {
text-decoration: none;
color: white;
display: block;
text-transform: uppercase;
}
.main-menu ul li a:hover {
text-decoration: underline;
color: red;
}
ul li ul li{
display: none;
float: left;
width: 296.6px;
}
ul li:hover ul li{
display: block;
max-height: 50%;
}
.content{
margin:auto;
width:100%;
background:white;
box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
}我一开始试着用https://codepen.io/julian-van-garden/pen/eYmyZJJ?fbclid=IwAR0Rb8MZS5PAhAh1sPkBiPDAAvZPn325gYxfbT9ws_R5UT8WqhUma9JojOI,因为我想要一些responsive...Then,我放弃了。基本上,菜单和徽标需要完全相同的大小:在代码中,据我所知,它们是890px。然而,当在浏览器中预览时,菜单并不具有相同的长度。有人能告诉我为什么吗?非常感谢!
发布于 2020-01-06 02:48:51
一种解决方案是这样的。您可以使用宽度和字体大小进行拨号。
.main-menu ul li {
float: left;
width:15%;
background-color: black;
text-color: white;
text-align: center;
font-size:18px;https://stackoverflow.com/questions/59602975
复制相似问题