CSS边栏对齐

我对侧边栏的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似乎在做它的工作，但Li不是

这是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> 

产品

阿卡纳狗

太平洋阿卡纳酒店
阿卡纳草原
阿卡纳牧场


阿卡纳猫
阿卡纳野生草原
太平洋阿卡纳酒店
阿卡纳草原


奥里扬猫
奥里延猫和猫；小猫
Orijen 6-猫用鱼


奥里扬犬
奥里扬小狗
奥里扬小狗大
Orijen成虫
Orijen 6鱼狗
奥里延地区红
奥里扬高级犬

这是JS小提琴，没有ofc的图像

只需从

#侧栏ul

中删除规则

高度：45px

见：

---

看起来简单得令人怀疑。

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

您需要添加HTML。还有一个很有用的链接或者是你的边栏。@thirtydot好的，两个都完成了，够了吗？哇，伙计，你是个救命恩人，呵呵。这在过去的几个小时里一直困扰着我。