html - CSS inline-block 定位问题

Question

我正在尝试制作一个网站，但在布局上遇到了一些问题。
我想div:logo和div:social media在同一条线上，但我做不到。

演示

Answer 1

像这样（并排）写下你的 div:logo 和 div:social media 不要在它们之间留出任何空间

<div class="child" id="logo">logo</div><div class="child" id="socialMedia">sosyal media</div>

希望这能解决您的问题。

Answer 2

尝试这个：

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：

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;
}

小提琴

Answer 3

如果您正在使用display:inline-block，您的行内块元素之间不能有空格，否则它会将其视为空格并插入它。

删除它，它将起作用：

已删除 div 之间的空白

带有注释的代码缩进