html - 将文本片段对齐到同一行

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