Question

我有一个没有正确堆叠的ul（或者是，但不符合我想要的结果。）

HTML：

<ul id="footer_site_map">
        <li class="footer_parent"><a href="/pages/index/About">About</a>
            <ul class="footer_of_children">
                <li class="footer_children"><a href="/pages/index/Our%20Veterinarians">Our Veterinarians</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Our%20Staff">Our Staff</a>
                </li>
            </ul>
        </li>
        <li class="footer_parent"><a href="/pages/index/Preventative%20Medicine">Preventative Medicine</a>
            <ul class="footer_of_children">
                <li class="footer_children"><a href="/pages/index/Puppies">Puppies</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Kittens">Kittens</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Adult%20Care">Adult Care</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Senior%20Care">Senior Care</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Rabbits">Rabbits</a>
                </li>
            </ul>
        </li>
        <li class="footer_parent"><a href="/pages/index/Surgical">Surgical</a>
            <ul class="footer_of_children">
                <li class="footer_children"><a href="/pages/index/Spaying">Spaying</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Neutering">Neutering</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Orthopedic%20Surgery">Orthopedic Surgery</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Soft%20Tissue%20Surgery">Soft Tissue Surgery</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Declawing%20Cat">Declawing Cat</a>
                </li>
            </ul>
        </li>
        <li class="footer_parent"><a href="/pages/index/Medical">Medical</a>
            <ul class="footer_of_children">
                <li class="footer_children"><a href="/pages/index/%20Complete%20Medical%20Assessment"> Complete Medical Assessment</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Cardiology">Cardiology</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Flea%20Treatment">Flea Treatment</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Dentistry">Dentistry</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Radiology">Radiology</a>
                </li>
                <li class="footer_children"><a href="/pages/index/Laboratory">Laboratory</a>
                </li>
            </ul>
        </li>
    </ul>

CSS：

#footer_site_map {
    position:absolute;
    padding:0;
    margin:0;
    top: 20px;
    left: 0;
    width:100%;
}
.footer_parent {
    position: relative;
    width: 180px;
    height:20px;
    padding: 0 5px;
    display: inline-block;
}
.footer_parent a {
    color: #FFF;
    text-decoration: none;
    font-family: MyriadProSemibold;
    font-size: 120%;
}
.footer_children {
    padding: 5px 0;
    width: 200px;
}
.footer_children a {
    color: #FFF;
    list-style-type: none;
    text-decoration: none;
    font-family: ralewayregular !important;
    font-size: 100%;
}
.footer_of_children {
    padding: 0;
    margin:0;
}

从小提琴中可以看出，父母ul li's堆叠在孩子们的上面。我需要它反过来。

是否有一些简单的解决方法，或者我应该重新构建它。

如果你看小提琴，你可能需要拖动栏来增加结果的大小。

Answer 1

将vertical-align: top;添加到.footer父级会修复此问题：

.footer_parent {
  position: relative;
  width: 180px;
  height: 20px;
  padding: 0 5px;
  display: inline-block;
  vertical-align: top;
}

UL列表项目从底部而不是顶部堆叠

1 个答案: