無法使用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元素

回答

相關問題