【发布时间】:2014-08-03 05:31:12
【问题描述】:
我之前已经发布了一些这样的代码,试图将侧边栏链接放在正确的位置并以一种特殊的方式看起来,我决定朝着不同的方向前进。我现在需要的是知道我应该做什么来获得我在侧边栏旁边而不是在它下面标记为“内容”的 div。我什么都试过了。侧边栏和内容 div 一起在同一个 div 中,我尝试在 inline、inline-block 中显示。没有任何效果。我只希望它们彼此相邻并保持水平。你能再帮我一次吗?非常感谢!
此处显示的代码: http://jsfiddle.net/eNUpJ/11/
HTML
</div>
<div id="wholething">
<div id="sidebar">
<h3>Navigation Links</h3>
<div id="sidelinks">
<div id="buttons"><a href="#">Home</a>
</div>
<div id="buttons"><a href="#">Biography</a>
</div>
<div id="buttons"><a href="#">News</a>
</div>
<div id="buttons"><a href="#">Music</a>
</div>
<div id="buttons"><a href="#">Contact</a>
</div>
</div>
</div>
<div id="content">
<p>News stuff and things</p>
</div>
</div>
</body>
CSS
#sidebar {
background: #464646;
width: 250px;
height: 500px;
margin-left: 50px;
border-radius: 15px;
position: relative;
}
h3 {
font-family:'Coda', cursive;
color: white;
background: #6B6B6B;
font-size: 24px;
text-align: center;
padding: 15px 0 8px 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#sidelinks {
font-family:'Armata', sans-serif;
width: 250;
font-size: 25px;
text-decoration: none;
color: white;
background-color: #4D4D4D;
padding: 10px;
line-height: 40px;
}
#buttons a {
text-decoration: none;
color: white;
}
#content {
position: relative;
width: 750px;
border-radius: 15px;
background: #464646;
}
#wholething {
display: inline;
}
【问题讨论】: