0

これらの div をスタイルして、箇条書きなしで 1 行に表示するにはどうすればよいですか?

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

例: Copyright (c) 2013 Acme Inc. All rights reserved. プライバシー ポリシー 利用規約

4

2 に答える 2

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は非常にオプションですが、私の意見では非常にお勧めです。ul { list-style-type: none; }cssセレクターをまたはに調整するだけですul li { ... }

しかし、正直なところ、なぜこれを単純に使用しないのですか?

<div>
 Copyright (c) 2013 Acme Inc. All rights reserved.
 <a href='#'>Privacy Policy</a> 
 <a href='#'>Terms &amp; Conditions</a>
</div>
于 2013-01-22T22:28:39.060 に答える
1 
<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>
于 2013-01-22T22:34:48.770 に答える