cssはどのようにli要素の親要素における平均分布効果を実現するか
3965 ワード
cssはどのようにli要素の親要素における平均分布効果を実現するか:実際の応用では、通常、親要素にはサブ要素の列があり、これらのサブ要素は親要素に均一に分布することができる.効果は簡単で、実現方法もそれぞれ異なりますが、初心者にとっては悩みになるかもしれません.コードは次のとおりです.
上のコードは、親要素にナビゲーションバーが均一に分布する効果を実現し、両端に隙間がなく、中間に隙間があるだけです.実装原理:実装原理は非常に簡単です.li要素がフローティングされた後、右外縁を設定し、親要素ul_box(その実用的なul要素も可能)幅はulの幅、つまり630(li要素の幅と外距を含む)に設定されており、このとき自然と左右に隙間があり、最外層のbox親要素を使ってoverflowカットを行えばよい.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=16765
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> </title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width:625px;
border:1px solid red;
overflow:hidden;
margin:50px;
}
#ul_box{width:630px;}
ul li{
width:100px;
height:30px;
margin-right:5px;
list-style:none;
float:left;
background:#CCC;
text-align:center;
line-height:30px;
}
</style>
</head>
<body>
<div id="box">
<div id="ul_box">
<ul style="overflow:hidden">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</div>
</body>
</html>
上のコードは、親要素にナビゲーションバーが均一に分布する効果を実現し、両端に隙間がなく、中間に隙間があるだけです.実装原理:実装原理は非常に簡単です.li要素がフローティングされた後、右外縁を設定し、親要素ul_box(その実用的なul要素も可能)幅はulの幅、つまり630(li要素の幅と外距を含む)に設定されており、このとき自然と左右に隙間があり、最外層のbox親要素を使ってoverflowカットを行えばよい.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=16765
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/