CSS Layout - ပြသမှု- inline-block
ပြသမှု- inline-block တန်ဖိုး
နှိုင်းယှဉ် display: inline
ချက်တွင် အဓိကကွာခြားချက်မှာ display: inline-block
ဒြပ်စင်ပေါ်တွင် အကျယ်နှင့် အမြင့်ကို သတ်မှတ်ခွင့်ပြုခြင်းဖြစ်သည်။
ထို့အပြင်၊
display: inline-block
အပေါ်နှင့်အောက်ခြေအနားသတ်များ/အကွက်များကို လေးစားသော်လည်း display: inline
၎င်းတို့နှင့်မဆိုင်ပါ။
နှိုင်းယှဉ်ပါ display: block
က အဓိကကွာခြားချက်မှာ display: inline-block
element ပြီးနောက် line-break မထည့်သောကြောင့် element သည် အခြားဒြပ်စင်များဘေးတွင် ထိုင်နိုင်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် မတူညီသော အပြုအမူများကို ပြ
သ သည် display: inline
၊display: inline-block
display: block
ဥပမာ
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
လမ်းကြောင်းပြလင့်ခ်များဖန်တီးရန် inline-block ကိုအသုံးပြုခြင်း။
အသုံးများသော အသုံးတစ်ခုမှာ display: inline-block
ဒေါင်လိုက်အစား အလျားလိုက် အလျားလိုက် ဖော်ပြရန်ဖြစ်သည်။ အောက်ဖော်ပြပါ ဥပမာသည် အလျားလိုက် လမ်းကြောင်းပြလင့်ခ်များကို ဖန်တီးပေးသည်-
ဥပမာ
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}