将文本片段对齐到同一行答案

【问题标题】：Align pieces of text onto the same line将文本片段对齐到同一行
【发布时间】：2014-03-05 23:55:06
【问题描述】：

        <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 来完成这项工作？

【问题讨论】：

不清楚你为什么要使用这种奇怪的 HTML 结构或到目前为止你尝试了什么。你能提供你的CSS吗？一个 JSfiddle 会很有用。
所以左、中、右部分是文章，对吗？请注意，当您使用float 时，您还必须考虑clear 属性。
我认为文章是新的 html 5 语法？
是的，抱歉应该说清楚
<article 在 HTML5 下是允许的，但我怀疑你的包装元素应该是 <section>

标签： html css css-float text-alignment

【解决方案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%;
}

【讨论】：

【解决方案2】：

使用 CSS：

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

【讨论】：

【解决方案3】：

你可以使用这个 css：

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

这里是jsfiddle

【讨论】：