[英]CSS inline-block Positioning Issue
write your div:logo and div:social media like this (side by side) don't make any space between them 写你的div:logo和div:像这样的社交媒体(并排)不要在它们之间留出任何空间
<div class="child" id="logo">logo</div><div class="child" id="socialMedia">sosyal media</div>
hope this will solve your issue. 希望这能解决你的问题。
Try this: 尝试这个:
HTML: HTML:
<div class="parent">
<div class="parent" id="header">
<div class="child floatL" id="logo" >
logo
</div>
<div class="child floatL" id="socialMedia" >
sosyal media
</div>
<div class="child" id="menuBar">
menu bar
</div>
</div>
<div class="parent" id="body">
body
</div>
<div class="parent" id="footer">
footer
</div>
</div>
CSS: CSS:
body {
text-align: center;
}
.floatL
{
float:left;
}
.parent {
display: inline-block;
width: 960px;
}
.child {
display: inline-block;
}
.parent, .child {
border: none;
background-color: #CCC;
}
#logo {
width: 640px;
background-color: #ff6a00;
}
#socialMedia {
width: 320px;
background-color: #ffd800;
}
#menuBar {
width: 100%;
background-color: #b6ff00;
}
If you are using display:inline-block
you are unable to have a space between your inline-block elements otherwise it will treat this as a whitespace and insert it. 如果使用
display:inline-block
,则无法在内联块元素之间留出空格,否则会将其视为空格并插入。
Remove this and it will work: 删除它,它将工作:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.