问题：菜单项之间无法留出空间（至少 1 厘米）。
\n我是初学者，刚刚学习。我知道这个问题对于有经验的用户来说听起来很愚蠢。
\n这是代码：
\nbody {\n height: auto;\n width: auto;\n background-image: url("img/top.png");\n}\n\n.header {\n margin: 0px auto;\n max-width: 960px;\n}\n\n#header {\n height: 300px;\n width: 960px;\n background-image: url("img/top.png")\n}\n\n#menu ul {\n margin: 0px auto;\n margin-left: -20px;\n /*pull towards left*/\n margin-right: 20px;\n /*push towards right*/\n list-style: none;\n background: #3d3d5c;\n}\n\n#menu li {\n display: inline-block;\n}\n\n#menu li a {\n margin-left: -40px;\n color: #fff;\n text-decoration: none;\n display: block;\n background: red;\n padding: 0 10px 0 10px;\n height: 54px;\n width: 130px;\n line-height: 54px;\n}\n\n#menu li a:hover {\n color: #fff;\n text-decoration: none;\n background: url(img/manu1.png);\n height: 54px;\n width: 130px;\n line-height: 54px;\n}\n\n.box {\n margin: 0px auto;\n width: 960px;\n background-color: ghostwhite;\n height: 700px;\n max-height: 2200px;\n}\n\n.news {\n margin: 0px auto;\n margin-left: 20px;\n margin-top: 20px;\n display: inline-block;\n background-image: url(\'img/bgr.png\');\n background-size: 960px, 500px;\n width: 670px;\n height: 500px;\n max-height: 2000px;\n}\n\n.news h1 {\n background-image: url(\'img/news.png\');\n font-style: normal;\n font-size: 30px;\n color: white;\n width: 670px;\n height: 38px;\n}\n\n.part {\n margin: 0px auto;\n margin-left: 700px;\n margin-top: -95px;\n background-image: url(\'img/bgr.png\');\n background-size: cover;\n width: 240px;\n height: 300px;\n max-height: 2000px;\n}\n\n.part h1 {\n background-image: url(\'img/side.png\');\n font-style: normal;\n font-size: 30px;\n color: white;\n width: 240px;\n height: 38px;\n}<!DOCTYPE html>\n<html>\n\n<head>\n <link rel="stylesheet" type="text/css" href="style.css">\n <link rel="stylesheet" href="css/bootstrap.min.css">\n <title>Pagrindinis Puslapis</title>\n</head>\n\n<body>\n <header class="header" id="header">\n </header>\n <menu class="header" id="menu">\n <ul>\n <li><a href=\'#\'>Pagrindinis</a></li>\n <li><a href=\'#\'>Kontaktai</a></li>\n <li><a href=\'#\'>Paslaugos</a></li>\n </ul>\n </menu>\n <div class="box">\n <div class="news">\n <h1>Labas rytas</h1>\n \xc5\xa0tai tokios naujienos\n <div class="part">\n <h1>R\xc4\x96M\xc4\x96JAI</h1>\n <img src="rem.png" height="100" width="100" </img>\n <h1>labas</h1>\n \xc4\x8cia naujien\xc5\xb3 n\xc4\x97ra\n\n </div>\n </div>\n </div>\n\n\n</body>\n\n</html>向本文正文添加一些额外字符以绕过验证...\n向本文正文添加一些额外字符以绕过验证...
\n您可以margin-right为#menu li或#menu li a JS Fiddle添加值
#menu li {
display: inline-block;
margin-right:50px;
}
| 归档时间： |
|
| 查看次数： |
12831 次 |
| 最近记录： |