CSS-左側邊欄不在左側

Question

左側邊欄不會將自己放置在主區域的左側。 它似乎卡在導航鏈接上。 應將其放置在導航鏈接的“下方”，“按鈕”應與側欄重疊，就像它們與標題重疊一樣。 然后，我希望文本環繞在側邊欄（在我在此處發布的代碼中起作用）。

我嘗試在導航欄和側邊欄上使用z-index 。 我也嘗試過使用position:relative; 和float:left; 在側欄上沒有結果。 文本也應像下面的示例中那樣圍繞邊欄。 我設法使用position:relative;將邊欄移到左側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

嘗試將padding-left：0放入您的ul容器中。

Answer 3

這里看看我在這里對您的代碼所做的事情，同樣，您在開始時還沒有結束其中一個h2標簽。

訪問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