html给div设置宽度无效,span瀹藉害鏃犳晥

瀵?a href="//www.css5.com.cn/html/902.shtml">span鏍囩璁剧疆瀹藉害width鏃犳晥瑙ｅ喅绡?span瀹藉害鏃犳晥瑙ｅ喅

div css缃戦〉甯冨眬鏃讹紝瀵筪iv璁剧疆瀹藉害鑳芥甯告樉绀烘帓鐗堝嚭瀹藉害鏁堟灉锛屼絾瀵箂pan璁剧疆瀹藉害width鍗存槸鏃犳晥鐨勶紝鏃犺瀵箂pan璁剧疆澶氬皯width瀹藉害鍊煎潎鏃犳晥锛岃繖閲孋SS5涓哄ぇ瀹朵粙缁嶅嚑绉嶈css璁剧疆span瀹藉害鐢熸晥鎴愬姛銆?/p>

涓�銆佹棤鏁堝師鍥?/h3>

span鏃犺璁剧疆瀹藉害杩樻槸楂樺害height鍧囦笉鑳界敓鏁堬紝鏄洜涓簊pan娌℃湁鑷甫鍧楀睘鎬э紝鑰宒iv鑷甫鏈夊潡鍏冪礌锛岄�氫織鐞嗚В锛屽氨鍍弒pan娌℃湁鑷甫楠ㄦ灦锛岃�宒iv鑷甫楠ㄦ灦锛屾墍浠ョ湅鍒癲iv鐙崰涓�琛岋紝璁剧疆瀹藉害楂樺害涔熶細鐢熸晥锛岃�宻pan璁剧疆瀹藉害楂樺害涔熸棤鐢ㄦ病鏈変换浣曟晥鏋溿�?/p>

浜屻�丆SS瑙ｅ喅鎬濊矾

1銆乻pan璁剧疆float 璁剧疆娴姩鍚庡span璁剧疆瀹藉害 楂樺害浼氳捣浣滅敤

2銆乻pan璁剧疆display:block span褰㈡垚鍧楄嚜鐒惰缃浼氳捣浣滅敤

3銆乻pan璁剧疆display:inline-block 褰㈡垚鍦ㄤ竴鎺掔殑鍧楋紝璁剧疆瀹藉害涔熶細鐢熸晥

濡備綍閫夋嫨瀹炵幇span瀹藉害鐢熸晥锛?/strong>

1銆侀潬宸﹂潬鍙冲竷灞�鏃跺�欙紝浣跨敤瀵箂pan璁剧疆float

2銆佽缃搴pan鍗曠嫭涓�琛屾椂锛岄�夌敤display:block

3銆佹枃瀛楁贩鎺掓椂锛屽涓�娈垫枃瀛椾腑鍏朵腑涓�浜涙枃瀛楄缃搴︽椂鍊欓�夌敤display:inline-block

涓夈�佽span瀹藉害鐢熸晥div css瀹炰緥

1銆佸畬鏁磆tml css浠ｇ爜

span鏃犳晥鍙樼敓鏁堝疄渚?css5.com.cn

.box{ padding:10px; border:#F0F 2px solid; width:400px; height:80px}

.span-a{ float:left; width:100px; border:1px solid #F00}

.span-d{ float:right; width:100px; border:1px solid #F00}

.span-b{ display:block; width:100px; border:1px solid #00F}

.span-c{ display:inline-block; width:100px; border:1px solid #090}

float闈犲乏璁剧疆100px瀹藉害

float span浣滀负甯冨眬璁剧疆瀹藉害

span瀹藉害浣跨敤display:block鐙崰涓�琛?lt;/p>

span瀹藉害瀹炵幇瀹藉害

鍒嗗埆浣跨敤float銆乨isplay:block銆乨isplay:inline-block瑙ｅ喅span瀹藉害澶辨晥闂銆?/p>

2銆佹晥鏋滄埅鍥?/p>

span鎴愬姛璁剧疆瀹藉害涓夌鏁堟灉鎴浘

鍥涖�佹�荤粨

浣跨敤float娴姩璁﹕pan瀹藉害锛岄�氬父鐢ㄤ簬鎶妔pan褰撲綔div涓�鏍峰竷灞�妗嗘灦鏉ヤ娇鐢紱鍦ㄧ嫭鍗犱竴琛屽竷灞�鎯呭喌涓嬪彲浠ュspan璁剧疆css display:block瀹炵幇锛涘鏋滃湪鏂囧瓧鍐呭涓紝瑕佽鍏朵腑涓�浜涙枃瀛椾娇鐢╯pan骞惰缃搴︼紝鍙互浣跨敤display:inline-block瀹炵幇銆備互涓婃槸涓夌鎯呭喌涓嬪span璁剧疆瀹藉害鏃犳晥瀵瑰簲瑙ｅ喅鏂规硶锛屾牴鎹渶姹傞�夋嫨瀹炵敤姝ｇ‘鐨凜SS甯冨眬鏂规硶銆?/p>

鏍囩(Tag): 瀹藉害 span

鏈枃鍒嗕韩URL鍦板潃锛?a href="/html/1386.shtml">/html/1386.shtml

浣滆�咃細Thinkcss鍘熷垱