Question

我的侧边栏的CSS有问题。我需要让它自动对齐，此时它们彼此重叠。我还没有发布图像，但也许你们中的一些人仍然可以提供帮助。

这是我的CSS

#sideBar
{
position: relative;
padding: 0px;
margin: 0px;
height: 1020px;
background-color: #bfb48c;
width: 236px;
top: -10px;
}
#sideBar ul
{
position: relative;
display: block;
width: 222px;
height: 45px;
padding-top: 13px;
padding-left: 15px;
font-weight: 400;
background-image:url(../images/ulBG.png);
background-repeat: no-repeat;
color: #67614e;
margin: 17px;
 }

 #sideBar li
 {
position: relative;
display: block;
width: 201px;
height: 20px !important;
padding-left: 3px;
padding-bottom: 2px;
list-style-type:none;
border: thin;
border-bottom-style: solid;
color: #4c4a44;
 }

UL似乎正在做它的工作，但李的没有。

这是HTML

        <div id="sideBar">
            <img src="images/sideBarImage.png" width="236" height="241" alt=""/>
                <h1 id="productsSideBar"> PRODUCTS </h1>
                <ul id="acanaDog"> 
                    <h2> ACANA DOG </h2>
                    <li> <a href="#"> Acana Wild Prairie </a> </li>
                    <li> Acana Pacifica </li>
                    <li> Acana Grasslands </li>
                    <li> Acana Ranchlands </li>
                </ul>
                <ul id="acanaCat">
                    <h2> ACANA CAT </h2>
                    <li> Acana Wild Prairie </li>
                    <li> Acana Pacifica </li>
                    <li> Acana Grasslands </li>
                </ul>
                <ul id="orijenCat">
                    <h2> Orijen Cat </h2>
                    <li> Orijen Cat &amp; Kitten </li>
                    <li> Orijen 6-Fish For Cats </li>
                </ul>
                <ul id="orijenDog">
                    <h2> Orijen Dog </h2>
                    <li> Orijen Puppy </li>
                    <li> Orijen Puppy Large </li>
                    <li> Orijen Adult </li>
                    <li> Orijen 6 Fish Dog </li>
                    <li> Orijen Regional Red </li>
                    <li> Orijen Senior Dog </li>
                </ul>

这是JS小提琴，没有图像。 http://jsfiddle.net/KE4AL/

Answer 1

只需从#sideBar ul规则height: 45px中删除。

请参阅：http://jsfiddle.net/KE4AL/1/

似乎很可疑......

Answer 2

删除所有相对定位并改为使用负边距。相对定位会使元素相对于自身移动，它实际上并不像边距那样自行移动。

CSS边栏对齐

2 个答案: