Question

左侧边栏不会位于主区左侧。它似乎卡在导航链接上。它应该放在＆＃34;下面＆＃34;导航链接和＆＃34;按钮＆＃34;应该与侧边栏重叠，就像它们与标题重叠一样。然后我希望文本环绕侧边栏（在我发布的代码中工作）。

我尝试在导航栏和侧边栏上使用z-index。我还尝试在侧边栏上使用position:relative;和float:left;而没有结果。文本也应该围绕侧边栏，如下例所示。我设法使用position:relative;将侧边栏移到左侧，但文本不会将其换行。

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

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

为.navigation ul个样式

设置以下内容

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

将float: left;添加到.leftsidebar以允许文字环绕，并将padding-top: 20px 30px;（根据您的喜好调整）添加到.leftsidebar ul以补偿重叠。

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

Answer 2

尝试在ul容器中放置padding-left：0。

Answer 3

这里看看我在这里用你的代码做了什么，你也没有在开始时结束你的一个h2标签。

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

css - 左侧边栏不在左侧

3 个答案: