ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV レイアウト、テキストを常に中央に配置する必要があるのはなぜですか? _html/css_WEB-ITnose
DIV レイアウト、テキストを常に中央に配置する必要があるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:131071ブラウズ
新人求助CSS问题。
因为要练习一个网购项目，但是不太会CSS布局，现在的问题是DIV中的文字和文字总是居中，而且又不能自由控制(行列定位搞了好久都搞不定)，想请教一下高手帮帮忙，谢谢。顺便帮忙指点一下我的错误在哪里，如何快速提高？
b585974ae3b7dba3039af53a9593f9c4
9edbc9f8a17547b211646280ef16fe6e
93f0f5c25f18dab9d176bd4f6de5d30eb2386ffb911b14667cb8f0f91ea547a7
无标题页
6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
ul{margin:0;border:0;padding:0;}
li{list-style-type:none;}
#left ul {width: 696px; }
#left #ulListItem3 {width: 100%;vertical-align:top;}
#left #ulListItem3 li {width: 232px;float: left;display: block;height:260px;line-height:260px; margin:0;vertical-align:top;}
#left #ulListItem3 li div{ width:100%; height:100%; margin:0; border: 1px solid #000; vertical-align:top;}
#left #ulListItem3 li div div{border: 1px solid #DDD;margin:14px 21px 40px; width:190px; display:table; height:230px; line-height:230px;cursor: pointer; vertical-align:top;}
#left #ulListItem3 li div div img{width:190px; height:139px; margin-top:0px;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
54a26e6202df6c74a4949bb4ad827b92
dc6dce4a544fdca2df29d5ac0ea9906b
fff38c5d37238cf7684002c87ccb36a3
16b28748ea4df4d9c2150843fecfba68
c36fa6f5762f7bafa55e37dd53e22431
ea4281395fd979e24f18bbf1260c708b
25edfb22a4f469ecb59f1190150159c6
dc6dce4a544fdca2df29d5ac0ea9906b5f9ddd3c085a3825bedaffef1b58c6ca
4144a5a13e73c9de43656f6e004a4523
5f9641d3ab1782f674a2f9fe41501107女装54bdf357c58b8a65c66d7c19c8e4d1140c6dc11e160d3b678d68754cc175188a
5f9641d3ab1782f674a2f9fe41501107100元54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6
dc6dce4a544fdca2df29d5ac0ea9906b
dc6dce4a544fdca2df29d5ac0ea9906b
sadfsfa
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68 div＆gt;私が望む効果を達成してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题页</title> <style type="text/css"> ul,li,div,img{margin:0;border:0;padding:0;} ul,li{list-style-type:none;} img{ display:block;} #left ul {width: 696px; } #left #ulListItem3 {width: 100%;} #left #ulListItem3 li {float: left;height:260px;border: 1px solid #000; padding:10px; margin-right:10px; margin-bottom:10px; } #left #ulListItem3 li img{ width:190px; height:140px; border: 1px solid #DDD;} #left #ulListItem3 li p{} </style></head><body> <div id="left"> <ul id="ulListItem3"> <li> <img src="img2/140417131310449.jpg" alt="秋衣" width="232" /> <p>女装</p> <p>100元</p> </li> <li> <img src="img2/140417131310449.jpg" alt="秋衣" width="232" /> <p>女装</p> <p>100元</p> </li> <li> <img src="img2/140417131310449.jpg" alt="秋衣" width="232" /> <p>女装</p> <p>100元</p> </li> </ul> </div> </body></html> ご参考に
ありがとう、お兄さん！