ホームページ >ウェブフロントエンド >htmlチュートリアル >初心者、まだ始めていないのでアドバイスをください_html/css_WEB-ITnose
初心者、まだ始めていないのでアドバイスをください_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 12:00:381159ブラウズ
这个怎么实现居中
adf2a1de75c03b201667d5b6545a404f
97f2b6ae5f4f65bc7d15c6c9b9e8be8c
b2386ffb911b14667cb8f0f91ea547a7無标题文档6e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
#most {
width:780px;
高さ:30ピクセル;
背景:url(20120416013038848.jpg);
フロート:左;
}
#most ul {
padding:0px;
リストスタイル: なし;
フロート:左;
幅:8000ピクセル;
マージン:0px 自動;
}
#most li{
float:left;
}
#main {
float:left;
}
#most a{
ディスプレイ:ブロック;
幅:119ピクセル;
高さ:30ピクセル;
カラー:#FFF;
text-align:center;
行の高さ:29px;
テキスト装飾: なし;
フォントサイズ:14px;
フォントの太さ:太字;
}
#most a:hover{
background-color:#FFF;
color:#333;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
a1b41136bc559e1c9bca077db51c9e1d
243a8f3f087936dc3f96e2f0cf018c22
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32電子付属品5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32電脑整机5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32订购5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32联系我们5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回帰讨论(解决方案)
float元素不处理是在居中不可，特別処理必要：
デモはこちら
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <style type="text/css"> #most{width:780px;height:30px;background:#f0f0f0;float:left;border:1px solid #ccc; position:relative; left:50%; margin-left:-390px;} #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto} #most li{float:left} #main{float:left} #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold} #most a:hover{background-color:#FFF;color:#333} </style></head><body><div id="most"> <div id="main"> <ul> <li><a href="#">电子配件</a></li> <li><a href="#">电脑整机</a></li> <li><a href="#">需要订购</a></li> <li><a href="#">联系我们</a></li> </ul> </div></div></body></html> これは你原来基基地上にあるものです扩展、このような方法でのみ緊急、
margin:0 auto;
margin:0 auto;
margin:0 auto; これは、Web サイトの大部分で採用されている、高効率、安全、確実、強力な方法です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <style type="text/css"> #most{width:780px;height:30px;background:#f0f0f0;margin: 0 auto;border:1px solid #ccc;} #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto} #most li{float:left} /*#main{float:left}*/ #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold} #most a:hover{background-color:#FFF;color:#333} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} </style></head><body><div id="most"> <div id="main"> <ul class="clearfix"> <li><a href="#">电子配件</a></li> <li><a href="#">电脑整机</a></li> <li><a href="#">需要订购</a></li> <li><a href="#">联系我们</a></li> </ul> </div></div></body></html> 常用居中margin:0 auto;