ホームページ  >  記事  >  ウェブフロントエンド  >  センタリングの問題については、master_html/css_WEB-ITnose に問い合わせてください。

センタリングの問題については、master_html/css_WEB-ITnose に問い合わせてください。

WBOY
WBOYオリジナル
2016-06-24 12:14:061080ブラウズ

<style type="text/css">body{	text-align:center;}li{	background-image:url(images/btn3.jpg);	float:left;	list-style-type:none;	width:155px;	height:58px;	text-align:center;	color:#F09;	font-weight:bold;	font-size:16px;	font-family:Arial, Helvetica, sans-serif;}</style></head><ul>    <li></br>Gift</li>    <li></br>I,Say</li>    <li></br>Photo</li>    <li></br>Letter</li></ul>

このliはまだ中央に配置できません。さまざまな方法を試しました。助けてください。ページ上のボタンの位置を制御する方法は、CSSが使いにくいようです。または私の使い方が間違っています


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

float:left; は、ドキュメントフローをエスケープしているため、中央に表示されません

dispaly:inline; に変更してみましたが、ありません。フローティングエフェクト ああ、li の背景画像を削除したら中央に配置できました。どうなりましたか?

ul の外側に div を追加し、幅を設定してから、この場合は ul 全体が入るはずです。ショーの途中です

フロートの後に UL をクリアするのが最善です

ce93a09e219c76b92b40e39e10d9ad3a
947a65d5fa3b8bd914f492f78b6b182d
e5949e8aac84eba48975e78c768d30c1ギフトbed06894275b65c1ab86501b08a632eb
/br>レターbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

スタイルの float:left; を削除して、display: inline-block; を使用します。これで完了です。

ul width を指定し、position:relative を使用して完了です。使いやすいです。ありがとうございます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。