Question

我知道这应该很简单，但我无法理解。我希望在页面左侧有一个垂直导航菜单，其中页面的主要内容就在旁边。在这个例子中，我希望GOOGLY GOOGLY显示在菜单的右侧，而不是在它下面。如何让两列从顶部开始？谢谢！

[已更新 - 对于复制粘贴问题感到抱歉]

CSS

#vamain
{
 float: left;
 width: 100;
}


#vowelaltnav
{
/*avoid gap after li in ie6 by setting width*/
float: left
width: 130px;
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-left: 30px;
}

#vowelaltnav ul
{
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

#navlist a
{
display: block;
color: #8592BB;
padding: 8px 0 8px 8px;
}

/*boxmodel hack. http://css-discuss.incutio.com/?page=BoxModelHack SBMH*/
#navlist a { width: 114px; }

#navlist a
{
\width: 130px;
w\idth: 114px;
}

#subnavlist a
{
display: block;
color: #9C9C9C;
padding: 8px 0 8px 8px;
margin-left: 8px;
}

/*boxmodel hack. http://css-discuss.incutio.com/?page=BoxModelHack SBMH*/
#subnavlist a { width: 106px; }

#subnavlist a
{
\width: 122px;
w\idth: 106px;
}

#navlist a, #navlist a:visited,#subnavlist a, #subnavlist a:visited
{
border-left: 8px solid #FFFFFF;
background: #FFFFFF;
color: #9C9C9C;
text-decoration: none;
}

#navlist a:hover, #navlist a#current:hover
{
border-left: 8px solid #CCCCCC;
text-decoration: underline;
}

#subnavlist a:hover, #subnavlist a#subcurrent:hover
{
border-left: 8px solid #CCCCCC;
text-decoration: underline;
}

a#current, a:visited#current, a#subcurrent , a:visited#subcurrent
{
border-left: 8px solid #283D82;
background: #F3F5FC;
color: #283D82;
text-decoration: none;
}

HTML

<div id="vowelaltnav">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

<div id="vamain">
<p> GOOGLY GOOGLY </p>
</div>

Answer 1

你的CSS中有很多拼写错误导致它无法正常工作。以下是您需要解决的问题：

第3行：Width: 100; - ＆gt; width: 100px;
第11行：float: left - ＆gt; float: left;
第37,38,54,55行：从width

中删除斜杠

Fiddle

Answer 2

您需要返回并清理CSS。你有：

#navlist a
{
\width: 130px;
w\idth: 114px;
}

首先，两个宽度＆＃39;他们错了第二，为什么在同一个css标签中有两个宽度？

如果你现在回去做这些事，你会发现以后会更容易。相信我，我自己是一个新的开发人员，并且由于之前的延迟编码而遇到了类似的问题。

Answer 3

您只需要float: left和display: inline-block上的#vowelaltnav或#vamain

将内容放在垂直导航旁边

3 个答案: