无法使用CSS定位HTML元素

我正在尝试制作网页，但我无法使用CSS定位某些HTML元素。下面是我写的代码：无法使用CSS定位HTML元素

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "description" content = "This is the homepage of this website"> 
     <title>Home</title> 
     <style> 
      body{margin-top: 0px; background-color: #FBFBFB;} 
      .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
      .header img{float: left; padding: 5px; background-color: orange;} 
      .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; letter-spacing: 1.2px; background-color: pink;} 
      .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; top: 0px; left: 70px; background-color: lime;} 
     </style> 
    </head> 
    <body> 
     <div class = "container" > 
      <div class = "header"> 
       <img src = "a.png" alt = "logo" width = "100" height = "100"></img> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
      </div> 
     </div> 
    </body> 
</html>

这是我得到

enter image description here

我想借此宣传标语部分靠近网站名称输出，我试图改变填充和保证金0px但没有运气。我怎样才能做到这一点？而且如果我介绍这样

.header{border: 1px solid black;}

它采用图像上边框如图所示下面的截图 enter image description here

这究竟是为什么？

来源

2013-05-29 Call Me Dummy

你是怎么改变'padding'和'margin'的？ 'h1'还是'p'？它们都有默认的边距，可能会导致这个间距。 – ASGM

是的，我尝试设置边距和填充h1，p和img为0 px –

您需要从.header h1标记删除保证金 - 而不是您的margin-left:100px;尝试margin: 0 0 0 100px。还有一些浏览器将顶部边距放在p标签上，因此您可能也想重置该边距。

不能添加padding或background-color对图片标记

如果你有镀铬，请尝试使用内置的DOM查看器（右键点击并检查元素），它会告诉你什么是你的元素发生

我会亲自调整你的HTML，所以它看起来像这样：

<div class = "container" > 
     <div class = "header"> 
      <div class="imageHolder"><img src = "http://lorempixel.com/100/100" alt = "logo" /></div> 
      <div class="textHolder"> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
      </div> 
     </div> 
    </div>

，然后你可以使用以下样式：

body{margin-top: 0px; background-color: #FBFBFB;} 
.container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
.header .imageHolder {float: left; width:110px; background-color: orange;} 
.header .imageHolder img {margin:5px;} 
.header .textHolder {float:right; width:1090px;} 
.header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink; margin:0;} 
.header p {margin:0; color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; background-color: lime; margin-left:-30px; width:1120px;}

http://jsfiddle.net/peteng/XJVW3/

来源

2013-05-29 10:52:35 Pete

将标题和img置顶。但是，我如何将标语贴近标题？ –

浮动你的H1和P权利 – Pete

浮动没有帮助，它花了h1和p的权利，就好像在一条线，这是不是我想要的。我只想填补标题和标语之间的白色差距。 –

无论是<h1>和<p>都默认的利润，可能导致你看到出现的空间。添加此CSS应该修复它：

.header h1 {margin:0 0 0 100px;} 
.header p {margin:0;}

改变元素的位置的边界是一个单独的问题，是由于一种叫“缘塌陷”的答案在计算器上的其他地方这个问题已经很好地解释了： Adding CSS border changes positioning in HTML5 webpage。

的解决方案是顶部填充添加到.header元素，以弥补崩溃边缘：

.header {padding-top:30px;}

来源

2013-05-29 10:53:07 ASGM

这是30个随机值还是你计算的？ –

@CallMeDummy 30是一些随机值。在休闲时调整它。 – ASGM

试试这个图像具有宽度100px和填充5+5所以尽量将离开110px代替70px ... 编辑

添加margin-top: 0px; header p和.header h1 margin-bottom: 0px;使取下S之间的节奏p and h1

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "description" content = "This is the homepage of this website"> 
     <title>Home</title> 
     <style> 
      body{margin-top: 0px; background-color: #FBFBFB;} 
      .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
      .header img{float: left; padding: 5px; background-color: orange;} 
      .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; margin-bottom:0px; letter-spacing: 1.2px; background-color: pink;margin-bottom: 0px;} 
      .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; top: 0px; margin-left: 110px; background-color: lime;margin-top: 0px;} 
     </style> 
    </head> 
    <body> 
     <div class = "container" > 
      <div class = "header"> 
       <img src = "a.png" alt = "logo" width = "100" height = "100"></img> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-05-29 10:56:46 sAnS

试试这个！

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "description" content = "This is the homepage of this website"> 
     <title>Home</title> 
     <style> 
      body{margin-top: 0px; background-color: #FBFBFB;} 
      .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
      .header img{float: left; padding: 5px; background-color: orange;} 
      .header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink;} 
      .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; background-color: lime;} 
     </style> 
    </head> 
    <body> 
     <div class = "container" > 
      <div class = "header""> 
       <img src = "http://thecontentwrangler.com/wp-content/uploads/2011/08/User.png" alt = "logo" width = "100" height = "100"></img> 
       <div> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-05-29 11:01:24 abhishekgarg

无法使用CSS定位HTML元素

回答

相关问题