Question

我对这个HTML和CSS的东西非常陌生，我通常相当擅长学习东西，但这只是非常令人愤怒！

我基本上有一个徽标和3个文本链接。我想要左侧的徽标，以及徽标旁边的三个链接。

我不明白如何让这些元素彼此相邻。我在DIV中有徽标，在DIV中有3个文本链接。我在CSS中设置徽标DIV的宽度，但是文本DIV仍然位于徽标DIV的高度之下，尽管我为其设置了宽度，但它仍然跨越页面的整个宽度。

我知道我需要缩短DIV的宽度（我试过，但是我做错了，或者不可能），或者允许2个DIV部分重叠，但这似乎很平常，我认为DIV是一个块元素，不能覆盖。

请帮助!!!

如果有帮助，我得到的代码如下：

HTML

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css">
<title>Josh Shaw Design</title>
</head>

<body id="content">
<div id="wrapper">
<a href="index.html"><div class="logo"></div></a>
<div>
<a class="nav last" href="about.html">PROJECTS</a>
<a class="nav" href="about.html">CONTACT</a>
<a class="nav" href="about.html">ABOUT</a>
</div>


</div>
</body>
</html>

CSS

#content { background-image:url(../images/background-01.jpg);
background-repeat:no-repeat;
background-color:#F2F2F2;
background-position:top, center
}

#wrapper {margin:auto; width:960px;}


.logo {background-image:url(../images/logo-01.png); height:91px; width:369px;}
.logo:hover { background-image:url(../images/logo2-01.png);height:91px; width:369px;}

@font-face {font-family: quicksand; src:url(../Quicksand-Regular.otf);}

.nav { padding-top:100px; padding-right:20PX; float:right; color:#FFF; text-decoration:none; font-family:quicksand; font-size:16px;}
.nav:hover {color:#999;}

.last {padding-right:0px}

Answer 1

我会将您导航链接的div更改为<nav>。我会将你的类名称更改为类似“navList”的内容并更改你的css以反映，。像这样。

<nav>
<a href="about.html" class="navList">PROJECTS</a>
<a href="about.html" class="navList">CONTACT</a>
<a href="about.html" class="navList">ABOUT</a>
</nav>

然后，对于您的徽标使用float: left;并在导航栏上使用float: right;，请移除float: right;，因为这将通过您的导航进行处理。

.logo {
    background-image:url(../images/logo-01.png); 
    height:91px; 
    width:369px;
    float: left;
}

nav {
    float: right;
}

.navList {
 padding-top:100px; 
 padding-right:20PX; 
 color:#FFF; 
 text-decoration:none; 
 font-family:quicksand;  
 font-size:16px;
 }

Answer 2

http://awesomescreenshot.com/05a2lyg2ef

如果这就是你想要的。

按照以下更改进行操作：

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css">
<title>Josh Shaw Design</title>
<style>
#content { background-image:url(../images/background-01.jpg);
background-repeat:no-repeat;
background-color:#F2F2F2;
background-position:top, center
}

#wrapper {margin:auto; width:960px;}


.logo {background-image:url(../images/logo-01.png); height:91px; width:369px;/*I have your picture, I will use color*/ background:#000;}
.logo:hover { background-image:url(../images/logo2-01.png);height:91px; width:369px;}

@font-face {font-family: quicksand; src:url(../Quicksand-Regular.otf);}

.nav { padding-top:100px; padding-right:20PX; float:right; color:#FFF; text-decoration:none; font-family:quicksand; font-size:16px;}
.nav:hover {color:#999;}

.last {padding-right:0px}

/*My extra codes*/
a.logo{display:block; float:left;}
div.nav-content{float:left;}
a.nav{padding:0 20px 0 0;/*top right bottom left*/}
</style>
</head>

<body id="content">
<div id="wrapper">
<a class="logo" href="index.html"><div class="logo"></div></a>
<div class="nav-content">
<a class="nav last" href="about.html">PROJECTS</a>
<a class="nav" href="about.html">CONTACT</a>
<a class="nav" href="about.html">ABOUT</a>
</div>
<div style="clear:both;"></div><!-- remove floats-->


</div>
</body>
</html>

div标签的宽度

2 个答案: