把HTML網站骨架的邊框放入html中

因此，我在構建我的第一個網站時遇到了一些問題，並且遇到了一些問題。我希望我的導航欄位於網站框架的「邊框」內。我有骨架的標籤在我的導航欄，所以我不明白爲什麼它出現這樣的.. enter image description here 把HTML網站骨架的邊框放入html中

這裏是我的代碼 http://pastebin.com/jZ2KhaNx
http://pastebin.com/Zt88VUe6

來源

2015-01-21 ComputerDope

請提供stylesheet.css – 2015-01-21 05:29:20

在op上添加css – ComputerDope 2015-01-21 05:31:05

在jsfiddle.net上創建小提琴 – Afsar 2015-01-21 05:32:59

你能和這個替換你的CSS

#skeleton { 
    padding-top: 1em; 
    border: .5em double blue; 
    padding: .5em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 
    -moz-box-shadow: 3em 3em 10em rgba(0, 0, 0, .5); 
    -webkit-box-shadow: rgba(0,0,0,.5) 3em 3em 10em; 
} 

#navigation { 
    margin-right: 2em; 
    margin-left: 1em; 
    margin-top: 2em; 
    margin-bottom: 1em; 
    width: 12em; 
    font-size: .95em; 
} 

#navigation { 
    float: left; 
    height:300px; 
} 

#content{ 
    float: left; 
    height:300px; 
}

創建一個div導航後如下

<div id="content"> 
    <p> 
     bla bla bla bla blaba alblalljjlahy 
    </p> 
</div>

來源

2015-01-21 05:40:51

工作！謝謝！你能解釋爲什麼float：left會導致它不出現在骨架中嗎？ – ComputerDope 2015-01-21 05:43:19

浮動使得導航div向左浮動..除非你給浮動div一個固定的高度。它會漂浮在parant鏈接上面...... – 2015-01-21 05:45:22

但是不會讓它浮到左邊*在骨架內部？ – ComputerDope 2015-01-21 05:46:23

我的方法是非常規的，但我從來不喜歡與導航菜單關聯的idosychroncies和瀏覽器不兼容問題。

大多數解決方案都需要內嵌塊，幾年前它是一個更大的今天。但仍然有許多瀏覽器不處理內聯塊。我想在通常使用div的地方使用<button>。原因是其默認顯示與內聯塊相同。

我還發現使用<form>包裝元素非常方便，因爲它在給予display：inline時不會影響頁面渲染。此外，您可以使用'

將參數添加到包含在表單中的元素。在這種情況下，我會將每個導航鏈接的格式設置爲<button type="submit">。按鈕非常容易設計，並且它們自然並排。或者可以用<br/>

所以，我的資產淨值行將看起來像這樣堆放：

<div id="nav"> 
<form action="link"><button type="submit">Link Text</button></form> 
<form action="link"><button type="submit">Link Text</button></form> 
<form action="link"><button type="submit">Link Text</button></form> 
<form action="link"><button type="submit">Link Text</button></form> 
</div>

這適用於幾乎不需要CSS。

有很多你可以通過添加隱藏的輸入。

來源

2015-01-21 05:59:52 Misunderstood

把HTML網站骨架的邊框放入html中

回答

相關問題