Question

我很感激这方面的一些帮助;我在div中有4个元素。截至目前，它们相互堆叠，但我希望它们能够对齐。 #ninesixty是他们被放入的div。非常感谢（：

HTML

<header>
    <div id="ninesixty">    
        <h1 id="home_link">HOME</h1>
        <h1 id="projects_link">PROJECTS</h1>
        <img id="logo" src="images/logo.png"/>
        <h1 id="services_link">SERVICES</h1>
        <h1 id="contact_link">CONTACT</h1>
    </div>
</header>

CSS

header
{
background-color:white;
text-align:center;
}

#ninesixty
{
    height:900px;
    width:960px;
    margin-top:40px;
    background-color:white;
    margin: 0 auto;
    text-align:center;
    border-radius:8px;
    display:inline-block;
}

Answer 1

将display:inline-block;添加到所有h1，img标记以使其内联。

h1,img{
   display:inline-block;
}

FIDDLE

Answer 2

display: inline-block应该在您想要内联的元素上，而不是在其容器上。它不是一个继承的财产。

#ninesixty h1 { display: inline-block; }

http://jsfiddle.net/xx9n9/

Answer 3

将内联类添加到div中的所有元素

.inline
{
        display:inline-block;
}


<header>
    <div id="ninesixty">    
        <h1 id="home_link" class='inline' >HOME</h1>
        <h1 id="projects_link" class='inline' >PROJECTS</h1>
        <img id="logo" class='inline'  src="images/logo.png"/>
        <h1 class='inline'  id="services_link">SERVICES</h1>
        <h1  class='inline' id="contact_link">CONTACT</h1>
    </div>
</header>

Answer 4

您需要为他们指定规则

h1 { display: block; float; left;}

Answer 5

在页面上多次使用H1不是一个好主意

如果你改变它，你可以使用像这样的类

HTML

<header>
    <div id="ninesixty">    
        <div id="home_link">HOME</div>
        <div id="projects_link">PROJECTS</div>
        <img id="logo" src="images/logo.png"/>
        <div id="services_link">SERVICES</div>
        <div id="contact_link">CONTACT</div>
    </div>
</header>

CSS

#ninesixty div
{
    display: inline-block;
}

水平对齐HTML标题元素

5 个答案: