把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中

回答

相关问题