Question

如何设置这些div的样式，使它们在没有项目符号的情况下显示在一行上？

<div>
Copyright (c) 2013 Acme Inc. All rights reserved.
</div>

<div>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms &amp; Conditions</a></li>
</ul>
</div>

Answer 1

您应该向<ul>或父<div>添加课程。

<div class='copyright'>
Copyright (c) 2013 Acme Inc. All rights reserved.
</div>
<ul class='footer'>
     <li><a href="#">Privacy Policy</a></li>
     <li><a href="#">Terms &amp; Conditions</a></li>
</ul>

然后调整CSS：

.footer {
    list-style-type: none;
    display: inline;
}

.footer li, .copyright {
    display: inline;
}

或

.footer li, .copyright {
    display: inline-block;
}

或

.footer li, .copyright {
    display: block;
    float: left;
}

添加课程.footer是非常可选的，但在我看来非常推荐。您只需将css选择器调整为ul { list-style-type: none; }或ul li { ... }

即可

但说实话，为什么你不单纯使用它？

<div>
 Copyright (c) 2013 Acme Inc. All rights reserved.
 <a href='#'>Privacy Policy</a> 
 <a href='#'>Terms &amp; Conditions</a>
</div>

Answer 2

<html>
<body>
<div style="display:inline">
Copyright (c) 2013 Acme Inc. All rights reserved.
</div>

<div style="display:inline">
<ul style="display:inline">
<li style="display:inline"><a href="#">Privacy Policy</a></li>
<li style="display:inline"><a href="#">Terms &amp; Conditions</a></li>
</ul>
</div>
   </body>
</html>

使用CSS设计多个Div

2 个答案: