Question

我刚刚开始使用HTML和CSS进行开发，尽管阅读了有关盒子模型的信息，但我仍然遇到了一些定位基础知识的问题。

我想创建一个包含三个元素的标题导航栏 - 一个位于页面左侧，一个位于右侧，另一个位于中心。我希望这些元素彼此内联。

目前，它们以HTML格式表示

<body>
<div class="header">
    <ul class="child">
        <li id="lodestone"><a href="">The Lodestone</a></li>
        <li id="mogstation"><a href="">The Mog Station</a></li>
        <li id="user"><a href="">User Account</a></li>
    </ul>
</div>

然后我尝试使用CSS中的'text-align'属性对齐它们。

.header {
    background-color: #ffd9e7;
    border: black;
    display: block;
    box-sizing: border-box;
}

.header ul {
    display: inline-block;
}

.header > ul > li {
    display: inline-block;
}

#lodestone {
    text-align: left;
}

#user {
    text-align: right;
}

#mogstation {
    text-align: center;
}

然而，它产生了这个而不是预期的结果。 The three items are aligned, next to each other, on the left.

任何人都可以推荐我应该用什么css属性来解决这个问题？我的研究表明有使用float的方法，但是其他人建议不要使用它，当我尝试时，我会遇到文本溢出页面的问题。

Answer 1

如果你给ul和lis一个宽度和（例如100 l / 30），那么它们应该正确显示

.header {
    background-color: #ffd9e7;
    border: black;
    display: block;
    box-sizing: border-box;
}

.header ul {
    display: inline-block;
    width:100%;
}

.header > ul > li {
    display: inline-block;
    position:relative;
    vertical-align:top;
    width:30%;
}

#lodestone {
    text-align: left;
}

#user {
   text-align: right;
}

#mogstation {
    text-align: center;
}

<div class="header">
    <ul class="child">
        <li id="lodestone"><a href="">The Lodestone</a></li>
        <li id="mogstation"><a href="">The Mog Station</a></li>
        <li id="user"><a href="">User Account</a></li>
    </ul>
</div>

我添加了vertical-align：top;但它超出要求，你可以把它拿出来......

Fiddle

希望这有帮助

Answer 2

为什么不将li元素作为宽度的三分之一？

首先使ul为100％宽度，你还需要确保ul右侧没有填充，因为它往往会被浏览器自动添加：

.header ul {
    display: inline-block;
    padding: 0;
    width: 100%;
}

然后每个李33％

.header > ul > li {
    display: inline-block;
    width: 33%;
}

根据需要设计其余样式

Answer 3

请查看CSS Flexbox，了解不同的元素布局方法

header{
    display: flex;
    justify-content: space-around;
}

<header>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</header>

标题有三个元素，一个左边，一个中心，一个右边

3 个答案: