Question

我正在尝试创建一个网站，但我在布局方面遇到了一些问题我希望div:logo和div:social media在同一条线上，但我不能这样做。

Answer 1

写你的div：logo和div：像这样的社交媒体（并排）不要在它们之间留出任何空间

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

Fiddle

Answer 3

如果您使用display:inline-block，则无法在内联块元素之间留出空格，否则会将其视为空白并插入。

删除它，它将起作用：

White space between divs deleted

Indentation of code kept with comments

CSS内联块定位问题

3 个答案: