DIV元素空間問題

這是我第一次學習HTML和CSS（4天前開始）。我只是爲了娛樂而製作一個測試網站，並遇到了一個問題。有一個元素阻止了一些文本進入我想要的地方。我知道這是導航欄，因爲它在我刪除它時解決了問題，但我不想刪除它。如何解決它？對不起，任何錯別字，我不是一個母語英語的人。注意=這只是一個測試網站。我知道這些圖像是版權的。 http://s9.postimg.org/8mokg65db/Optimized_Sk_rmavbild_2013_10_29_kl_20_33_10.jpg 代碼：HTML：DIV元素空間問題

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>Hem - Tupac Shakur Fansida</title> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
</head> 
</body> 
<div class=wrapper> 
!-----------------------------------! NAVIGATION 
<div id="navmenudiv"> 
<ul id=」navmenu」> 
<li><a href=index.html>Start</a></li> 
<li><a href=about.html>Om</a></li> 
<li><a href=」#」>Död</a></li> 
<li><a href=」#」>Lever han?</a></li> 
<li><a href=」#」>Diskografi</a></li> 
</ul> 
</div> 
!-----------------------------------! NAVIGATION 
<p>Den här sidan är till minne för Tupac Shakur, en av de bästa hip-hopparna genom tiderna. Jag vet att det redan finns många sådana sidor, men denna är helt och hållet på svenska och för med mina tankar också.</p> 
<p>Tupac föddes den 16:de Juni 1971 i Harlem, New York. Hans mamma, Afeni Shakur, var fattig och medlem i den svarta kriminella gruppen Svarta Pantrarna. När han var 12 år började han på Baltimore School for the Arts.</p> 
<p>Tupac är den bäst-säljande artisten genom tiderna och det finns få artister som inte känner till hans stora namn. Han sköts ihjäl av okända gärningmän den 7 september 1996.</p> 
</div> 
</body> 
</html>

CSS：

#navmenudiv {position:relative;bottom:53px;right:4px;} 
#navmenudiv ul {padding:0} 
#navmenudiv li {display:inline;} 
#navmenudiv li a {font-family:Helvetica;font-size:11px;text-decoration:none; 
float:left;padding:10px;background-color:#2175bc;color:#fff;} 
#navmenudiv ul li a:hover {background-color:#2586d7;margin-top:-2px; 
padding-bottom:12px;}

來源

2013-10-29 User007Steklov

，以確保有足夠的空間將是把風格"clear: left"的DIV上面帶有文字的最簡單的方法，這將確保左側沒有浮標。另一種方法是製作導航欄"position: absolute"，但這需要父級爲"position: relative"或本身是絕對的。

來源

2013-10-29 22:57:38

太棒了！隨着一些「邊距」和「位置」，文字就到了我想要的地方！ :) – User007Steklov

它看起來像你想要的菜單重疊圖像的，所以你可以通過設置display:inline-block您的#navmenudiv CSS改變

#navmenudiv {position:relative;right:4px; display:inline-block; margin-top:-50px}

這將清除文本到下一行，然後使用margin-top:-50px來創建一個消極的邊緣，將圖像上方的菜單向上拉。

（您將需要負利潤率的大小，播放，以實現你想要的佈局）

來源

2013-10-29 23:02:28 Gavin

它看起來像這個問題（這是很難說，因爲我們沒有完整的源代碼）是隻需要清除導航下方該段落的浮標（enter link description here）即可。

所以這裏是一個快速的JSFiddle向你展示我的修改代碼，將段落文本置於導航之下，還糾正了一些你的div和沒有引用引號的鏈接。

下面是修改後的HTML：

<div class="wrapper"> 
    <div id="navmenudiv"> 
     <ul id="navmenu"> 
      <li><a href="index.html">Start</a> 

      </li> 
      <li><a href="about.html">Om</a> 

      </li> 
      <li><a href="#">Död</a> 

      </li> 
      <li><a href="#">Lever han?</a> 

      </li> 
      <li><a href="#">Diskografi</a> 

      </li> 
     </ul> 
    </div> 

    <div class="clear"></div> 

    <p>Den här sidan är till minne för Tupac Shakur, en av de bästa hip-hopparna genom tiderna. Jag vet att det redan finns många sådana sidor, men denna är helt och hållet på svenska och för med mina tankar också.</p> 
    <p>Tupac föddes den 16:de Juni 1971 i Harlem, New York. Hans mamma, Afeni Shakur, var fattig och medlem i den svarta kriminella gruppen Svarta Pantrarna. När han var 12 år började han på Baltimore School for the Arts.</p> 
    <p>Tupac är den bäst-säljande artisten genom tiderna och det finns få artister som inte känner till hans stora namn. Han sköts ihjäl av okända gärningmän den 7 september 1996.</p> 
    </div<!-- .container --> 
</div>

CSS：

/* General */ 
.clear { clear: both; } 

/* Navigation */ 
#navmenudiv { 
    position:relative; 
} 
#navmenudiv ul { 
    padding:0 
} 
#navmenudiv li { 
    display:inline; 
} 
#navmenudiv li a { 
    font-family:Helvetica; 
    font-size:11px; 
    text-decoration:none; 
    float:left; 
    padding:10px; 
    background-color:#2175bc; 
    color:#fff; 
} 
#navmenudiv ul li a:hover { 
    background-color:#2586d7; 
    margin-top:-2px; 
    padding-bottom:12px; 
}

希望能解決您遇到的問題。

來源

2013-10-29 23:09:37

您正在關閉HTML代碼第八行的<body>標記。

來源

2013-10-29 23:09:55 Eagle

你是什麼意思？ – User007Steklov

你正在關閉身體標記，甚至沒有創建它:)。它的對標籤必須通過輸入來聲明，並在您的html文檔正文末尾以關閉。所以它像 ..代碼... – Eagle

哈哈！這很奇怪，我知道，只是一個小姐或什麼。但是如果沒有開標籤，它是如何工作的？！ :)但它並沒有影響我的問題。 – User007Steklov

DIV元素空間問題

回答

相關問題