ホームページ > 記事 > ウェブフロントエンド > ul_html/css_WEB-ITnose で li を中央に配置して均等に分散する方法
ul_html/css_WEB-ITnose で li を中央に配置して均等に分散する方法
- 不言オリジナル
- 2018-05-24 09:37:037282ブラウズ
図に示すように、UL は固定幅、li は可変幅、li は inline-block に設定されています。これで、li が水平方向に均等に配置され、ul の中央に配置されるようになります。設定方法
返信ディスカッション (解決策)
<style type="text/css">
ul{margin:0 auto;padding:0;
width:400px;background:#F00;
text-align:center;
}
li{
list-style:none;
display:inline-block;
margin:0 10px;width:100px;
background:#0F0;}</style><ul>
<li>1</li><li>2</li><li>3</li></ul>純粋な CSS は、li に特定の幅が与えられた場合にのみ機能します。
それ以外の場合は、js を使用する必要があります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。