Question

我有一个简单的问题。我试图显示＆＃34;关于＆＃34;

元素。＆＃34;一般＆＃34;和＃34;社交按钮＆＃34;嵌套无序列表中的类。我希望这些看起来是水平的并且彼此内联。我希望它们基本上是并排的，而不是垂直的。如果你可以帮我弄清楚我需要添加哪个选择器显示：inline＆＃39;块，这将非常有用。

<div class="footer-container">
<div id="footer_menu">
<div id="footer-copy">
    <li class="about-blurb">
        <h3>Viral DNA</h3>
        <ul>
            <li>
            <p>Virael Marketing is the leading digital marketing blog for the social web. We are a one-stop hub to help you learn from your viral marketing campaigns, offer tips & tricks, and build the best digital marketing teams.</p>
            </li>
        </ul>
          <li class="General">
    <h3>General</h3>
         <ul>
        <li><a class="button" href="#">Media</a></li>
                <li><a class="button" href="#">Resources</a></li>
                <li><a class="button" href="#">Blog</a></li>
            <li><a class="button" href="#">Store</a></li>
            <li><a class="button" href="#">Contact</a></li>
             </ul>
    <li class="social-icons">
    <h3>Follow Virael</h3>
        <ul>
            <li>
            <!--social media buttons go here--> 
        </li>
    </ul>
</ul>
</div>
</div>

CSS：

.footer-container {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial,  sans-serif;
float: left;
text-align: left;
width: 828px;   
text-transform: capitalize;
background-color: #4169E1;
color: #FFF;
position: relative;
bottom: 0;
left: 269px;
border-top: 10px solid #B0C4DE; 
overflow: hidden;
z-index=-1000;

}

.footer-container h3 {
text-align:justify;

}

#footer_menu {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
list-style-type:none;
z-index=-1000;

}

#footer_menu ul {
margin: 0px 30px;
padding: 10px 30px;
list-style-type:none;
text-decoration:none;
display:inline; 
z-index=-1000;

}

#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
z-index=-100;
display:block;
color: white;
clear:both;

}

#footer_menu .about-blurb ul li {
width: 200px;
height: auto;
text-align:justify;

}

Answer 1

用我的css替换你的css。实例 here

#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}

#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}

从ul移除边距并将inline-block添加到li

如何让嵌套的子（li）内嵌到我的页脚导航中？

1 个答案: