Question

我正在尝试制作网页，但我无法使用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

为什么会这样？

Answer 1

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

您无法将padding或background-color添加到图片代码

如果您有chrome，请尝试使用内置的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/

Answer 2

默认情况下<h1>和<p>都有边距，这可能会导致您看到的空间出现。添加这个CSS应该修复它：

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

改变元素位置的边界是一个单独的问题，并且由于被称为＆＃34;边缘折叠＆＃34;其中StackOverflow上其他问题的答案已经很好地解释了：Adding CSS border changes positioning in HTML5 webpage。

解决方案是向.header元素添加顶部填充以补偿折叠边距：

.header {padding-top:30px;}

Answer 3

试试这个您的图片的宽度为100px，填充为5+5，因此请尝试添加左110px而不是70px ... 的修改

添加margin-top: 0px; header p和.header h1 margin-bottom: 0px;以删除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>

Answer 4

试试这个!!

<!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>

无法使用CSS定位HTML元素

4 个答案: