Question

        <article id='Focus'>
            <h1 id='main'>Focus</h1>
                <article id='Tell'>
                    <h1>Tell</h1>

                </article>
                <article id='NStart'>
                    <h1>NStart</h1>
                </article>
                <article id='FSB'>
                    <h1>pppp</h1>
                </article>
        </article>

我有这个HTML代码，我想让它全部对齐在同一条线上，一个位于左侧，另一个位于中央，另一个位于右侧。我尝试过使用float和text-align，但这些都不起作用。我应该考虑使用什么CSS来实现这项功能？

Answer 1

这个解决方案对你有好处吗？ DEMO

Html

<article id='Focus'>
    <h1 id='main'>Focus</h1>
    <br/>
    <article id='Tell'>
         <h1>Tell</h1>
    </article>
    <article id='NStart'>
         <h1>NStart</h1>
    </article>
    <article id='FSB'>
         <h1>pppp</h1>
    </article>
</article>

CSS

article {
    width:33%;
    float:left;
    text-align:center;
}
#Focus {
    width:100%;
}

Answer 2

使用 CSS：

#Focus article {
  float: left;
  width: 33%;
}

Answer 3

您可以使用此css：

#Focus article {
    width: 33%;
    float: left;
}

以下是jsfiddle

将文本对齐到同一行

3 个答案: