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

Question

所以我正在努力建立我的第一个网站，并遇到了一些问题。我希望我的导航栏位于网站骨架的“边界”内。我的导航栏里面有骨架的标签，所以我不明白为什么它会像这样出现..

这是我的代码 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>导航菜单相关的idosychroncies和浏览器不兼容性。

大多数解决方案需要内联块，而在几年前，这是一个更大的问题。但仍有许多浏览器无法处理内联块。

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

我还发现使用<form>包装元素非常方便，因为它在显示时不会影响页面呈现：内联。此外，您可以使用“

”将参数添加到表单中包含的元素

在这种情况下，我会将每个导航链接设为一个带有<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。

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