对代码和所有这些都非常陌生，我正在尝试使用 html 和 css 为类制作一个简单的页面。基本上问题是图片 div 和菜单 div 之间有一个空格，你可以看看你是否检查了我的代码，如果有什么我真的不需要，指出它会很有帮助。我也在 Chrome 中制作这个。干杯:)
附言。我只显示了 html 的一页，所以链接不起作用。
Here jsFiddle 的链接。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cristiano Ronaldo</title>
<link rel="stylesheet" type="text/css" href="../realstyle.css" />
</head>
<body>
<div id="contentwrap">
<div id="languagebar">
<ul id="languagelist">
<li id="Ronaldo">CRISTIANO RONALDO</li>
<li><a href="../Portuguese/Home.html">Português</a></li>
<li>English</li>
</ul>
</div> <!--languagebar-->
<div id="bigpic">
<a href="http://www.realmadrid.com/cs/Satellite/en/Home.htm">
<img id="Madrid" border="0" src="../GalleryI/Madrid.jpg" width="100" height="100px" />
</a>
<a href="http://www.manutd.com/Splash-Page.aspx">
<img id="United" border="0" src="../GalleryI/United.jpg" width="120" height="100px" />
</a>
</div> <!--bigpic-->
<div id="menubar">
<ul id="menubarlist">
<li>Home</li>
<li><a href="Early Life.html">Early Life</a></li>
<li><a href="Clubs.html">Clubs</a></li>
<li><a href="Records.html">Records/medals</a></li>
<li><a href="Personal Life.html">Personal Life</a></li>
</ul>
</div> <!--menubar-->
<div id="content">
</div> <!--Content-->
</div> <!--contentwrap-->
</body>
</html>
CSS
body {
background-image: url("GalleryI/Background.jpg");
width:100%;
margin:0;
padding:0;
}
A:hover {text-decoration: none; color:#CD2626;}
a:link {color: White; text-decoration: none;}
a:visited {color: White; text-decoration: none;}
#contentwrap {
text-align:center;
white-space: nowrap;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#languagebar {
width:800px;
height:30px;
background-image: url("GalleryI/languagebaricon.jpg");
background-repeat: no-repeat;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#languagelist li {
display:inline;
list-style:none;
position: relative;
line-height:25px;
padding: 2px 10px 0px 10px;
color:#CD2626;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
}
#languagelist li a:hover{
color:#CD2626;
}
#bigpic {
width:800px;
height:100px;
background: #fff;
background-image: url("GalleryI/Jersey1.jpg");
background-repeat: no-repeat;
background-position: 190px -155px;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#menubar {
width:800px;
height:40px;
background-image: url("GalleryI/menuicon.jpg");
background-repeat: no-repeat;
padding:0;
white-space: nowrap;
list-style:none;
font-family: Impact, Arial, sans-serif;
text-transform:uppercase !important;
font-size: 16px;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
#Madrid {
float: left;
}
#United {
float: left;
}
#content {
width: 800px;
height: 726px;
background-color: #FFF;
color: white;
font-size: 18px;
text-align:center;
font-family: arial,sans-serif;
color: white;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
li#Ronaldo {
line-height:25px;
padding: 2px 25px 2px 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;
float: left;
font-weight: bold;
}
ul#menubarlist li {
display:inline;
position: relative;
letter-spacing:2px;
line-height:35px;
padding: 0px 25px 0px 25px;
color:#CD2626;
}
ul#menubarlist li a:hover{
color:#CD2626;
}
ul#list-nav li a {
text-decoration:none;
color:#ffffff;
}
最佳答案
只需删除这个:
#languagebar{
border-left:1px solid #FFFFFF;
}
有一个空白是因为你有边框!
编辑:
如果您指的是图像之间的间隙，请参阅 http://jsfiddle.net/GZ8ZT/5/
只需添加
#bigpic{font-size:0}
如果你想在bicpic中添加文本，你还需要
#bicpic>*{font-size:16px} /* Or your default font-size value */
关于html - 小对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12151619/