Question

非常新的代码和所有这些，我试图用html和css为类创建一个简单的页面。基本上问题是图片div和菜单div之间有一个空格，你可以看看你是否检查了我的代码，如果有什么我真的不需要的话，指出它真的很有帮助。我也是在Chrome中制作这个。干杯：）

PS。我只显示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;
}

Answer 1

只需删除它：

#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 */

Answer 2

删除此

border-left:1px solid #FFFFFF;

来自* css #languagebar *

小对齐问题

2 个答案: