将 ul 放在 html 网站骨架的边界内

Question

所以我正在努力构建我的第一个网站，并且运行遇到了一些问题。我希望我的导航栏位于网站骨架的 "borders" 内。我的导航栏在骨架的标签内，所以我不明白为什么它会这样出现..

这是我的代码 http://pastebin.com/jZ2KhaNx
http://pastebin.com/Zt88VUe6

Answer 1

你能用这个

替换你的 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>

Answer 2

我的方法是非常规的，但我从不喜欢与 ul> <a> 导航菜单相关的同步性和浏览器不兼容性。

大多数解决方案都需要内联块，而几年前这是一个比今天大得多的问题。但是仍然有很多浏览器不处理内联块。

我喜欢在通常使用 div 的地方使用 <button>。原因是它的默认显示与内联块相同。

我还发现用 <form> 包裹元素非常方便，因为它不会影响页面呈现 display:inline。此外，您可以使用 `

向包含在表单中的元素添加参数

在这种情况下，我会让每个导航 link 成为一个带有 <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。

通过添加隐藏输入，您可以做很多事情。

将 ul 放在 html 网站骨架的边界内

Putting ul inside borders of website skeleton in html

html

web