CSS-左侧边栏不在左侧

Question

The left sidebar won't position itself on the left side of the main area. 左侧边栏不会将自己放置在主区域的左侧。 It seems to get stuck on the navigation link. 它似乎卡在导航链接上。 It should be placed "below" the navigation links and the "buttons" should overlap the sidebar just as they overlap the header. 应将其放置在导航链接的“下方”，“按钮”应与侧栏重叠，就像它们与标题重叠一样。 Then I want the text to wrap around the sidebar (works in the code I posted here). 然后，我希望文本环绕在侧边栏（在我在此处发布的代码中起作用）。

I have tried using z-index on the navigation and sidebar. 我尝试在导航栏和侧边栏上使用z-index 。 I have also tried using position:relative; 我也尝试过使用position:relative; and float:left; 和float:left; on the sidebar without result. 在侧栏上没有结果。 The text should also wrap around the sidebar as it is in the example below. 文本也应像下面的示例中那样围绕边栏。 I managed to move the sidebar to the left using position:relative; 我设法使用position:relative;将边栏移到左侧position:relative; but then the text won't wrap it. 但随后的文字将不会自动换行。

HTML: HTML：

<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
    <h1>TopBanner</h1>
</div>
<div class="header">
    <h1>Header</h1>
    <h2>underrubrik</h2>
</div>
<div class="navigation">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>
<div id="main">
    <div class="leftsidebar">
        <ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
        </ul>
    </div>
    <div class="content">
        <p>Content text here</p>
    </div>
</body>
</html>

CSS CSS

body {
    margin: 0;
    background: #fff;
}
/* BANNER */
.topbanner {
    width: 980px;
    height: 80px;
    margin: auto;
    border: 1px solid;
    text-align: center;
    font-family: sans-serif;
}
/* HEADER */
.header {
    width: 980px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    text-align: center;
    font-family: sans-serif;
}
.header h1 {
    margin: 0;
}
.header h2 {
    margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
    width: 980px;
    margin: auto;
}
.navigation a {
    text-decoration: none;
    color: #000;
}
.navigation ul  {
    float: left;
    margin: -10px 0 0 0;
    list-style: none;
}
.navigation ul li {
    display: inline;
    padding: 0 10px 0 10px;
    border: 1px solid;
    background: #fff;
}
.navigation ul li:first-child {
    border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
    border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
    width: 980px;
    margin: 0 auto;
    border: 1px solid;
}
.leftsidebar {
    width: 20%;
    position: relative;
}
.leftsidebar ul {
    margin: 0;
    border: 1px solid;
    list-style: none;
}
.leftsidebar ul li {
}
.content {      
}
.content p {
    font-family: sans-serif;
}

Answer 1

Set the following for .navigation ul styles 为.navigation ul样式设置以下内容

margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;

Add float: left; 添加float: left; to .leftsidebar to allow text to wrap around that, and add padding-top: 20px 30px; 到.leftsidebar以允许文本环绕，并添加padding-top: 20px 30px; (adjust to your liking) to .leftsidebar ul to compensate for the overlap. （根据您的喜好进行调整）到.leftsidebar ul以补偿重叠。

http://jsfiddle.net/ocfjsqpp/3/ http://jsfiddle.net/ocfjsqpp/3/

Answer 2

尝试将padding-left：0放入您的ul容器中。

Answer 3

Here have a look at what I did here with you code, also you haven't ended one of you h2 tags at the start. 这里看看我在这里对您的代码所做的事情，同样，您在开始时还没有结束其中一个h2标签。

Visit http://jsfiddle.net/4p6gdka9/ enter code here 访问http://jsfiddle.net/4p6gdka9/ enter code here

CSS-左侧边栏不在左侧

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-12-23 02:25:33

解决方案2
0 2014-12-23 02:28:25

解决方案3
0 2014-12-23 03:03:31

CSS-左侧边栏不在左侧

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-12-23 02:25:33

解决方案2 0 2014-12-23 02:28:25

解决方案3 0 2014-12-23 03:03:31

解决方案1
1 已采纳 2014-12-23 02:25:33

解决方案2
0 2014-12-23 02:28:25

解决方案3
0 2014-12-23 03:03:31