ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS スタイルとセンタリングについて質問します。 _html/css_WEB-ITnose

CSS スタイルとセンタリングについて質問します。 _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:35:59
オリジナル
1162 人が閲覧しました

<style>#cx{ width:90%; height:40px; margin:10px auto 10px auto;text-align:center;}#cx ul li{ width:45%; height:40px; float:left; list-style-type:none;}.cx{ width:80%; height:40px; margin:0px;auto; line-height:40px; color:#fff; background-color:#ABABAB; border-radius:4px; text-align:center; font-size:14px;}.cx a{ color:#fff;text-decoration:none;}.cx a:visited{ color:#fff;text-decoration:none;}.cx a:active{ color:#fff;text-decoration:none;}.cx a:hover{ color:#fff;text-decoration:none;}</style>
ログイン後にコピー

<div id="cx"><ul><li><div class="cx"><a href="javascript:void(0)">刷新</a></div></li><li><div class="cx"><a href="javascript:void(0)">退出</a></div></li></ul></div>
ログイン後にコピー

2 つのボタンを中央に配置することができません。アドバイスをお願いします。


ディスカッションへの返信(解決策)

IE8とFirefoxが中心ですが、どのブラウザをお使いですか?

IE8、360、Shojiのどちらでも動作しません。

? ?????????

えー

テスト結果はこんな感じです

テストの結果はどうでしたか?

テスト結果は同様で、右側が左側よりも明らかに広いです

完全に中央揃え

#cx{width:100%;
.cx{ display:inline-block;

<style>#cx{ width:90%; height:40px; margin:10px auto 10px auto;text-align:center;}#cx ul li{ width:45%; height:40px; float:left; list-style-type:none;}.cx{ width:80%; height:40px; margin:0px;auto; line-height:40px; color:#fff; background-color:#ABABAB; border-radius:4px; text-align:center; font-size:14px;}.cx a{ color:#fff;text-decoration:none;}.cx a:visited{ color:#fff;text-decoration:none;}.cx a:active{ color:#fff;text-decoration:none;}.cx a:hover{ color:#fff;text-decoration:none;}</style><div id="cx"><ul><li><div class="cx"><a href="javascript:void(0)">刷新</a></div></li><li><div class="cx"><a href="javascript:void(0)">退出</a></div></li></ul></div> 
ログイン後にコピー
; を追加する必要があります。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート