使用 CSS 将文本在同一行上左右对齐答案

【问题标题】：Align text to the left and right on the same line with CSS使用 CSS 将文本在同一行上左右对齐
【发布时间】：2015-03-28 18:00:43
【问题描述】：

我正在处理我的关于页面，但遇到了问题。尝试将（年或待定）与列的右侧对齐。例如，请参见图像。

顶部是它现在的样子。底部图像是我希望它的外观。

网站位于http://www.eatlovepray.me/portfolio/about-me/

【问题讨论】：

标签： html css text-align

【解决方案1】：

尝试使用 span 然后设置样式等于 'float:right'

<span style="float:right">pending </span>

【讨论】：

天啊，谢谢。我花了 3 天时间玩 css、div 样式、边距等，甚至无法完成。你的方法简单明了。完美运行。
@user3808918 此外，请查看jsfiddle.net/N4JZy 以查看它的实际效果。我的示例使用 div 而不是 span，但是很多人比我更快地到达这里。
^ 谢谢。那个 css 也清理了我的烂摊子。我有一堆不需要的额外代码，因为我在这里和那里复制并粘贴了很多代码。
@user3808918 请尽量避免内联style 属性。请改用.class。
@user3808918，你有什么反对内联风格的？就我个人而言，我发现内联样式更容易遵循，而不必经常参考一些内部/外部 .css 样式命令。

【解决方案2】：

Demo

css

ul {
    list-style: none;
}
#about ul li span {
    float: right;
}

html

<div id="about">
     <h3><strong>Education</strong></h3>

    <ul>
        <li><strong>Golden West College – Huntington Beach, CA <span>2012-2014</span></strong>

        </li>
        <li>– Associate in Arts Degree – Digital Arts Major <span>(pending)</span>
        </li><br/>
        <li>Certificate of Achievement</li>
        <li>– Graphic Design and Production Option <span>(pending)</span>
        </li><br/>
        <li>Certificate of Specialization</li>
        <li>– Graphic Design Foundation <span>6/2014</span>
        </li>
        <li>– Graphic Design Advanced Production <span>(pending)</span>
        </li>
    </ul>
</div>

【讨论】：

【解决方案3】：

给你

<ul>
    &nbsp;&nbsp;<strong>Golden West College – Huntington Beach, CA <span style="float:right">2012-2014</span></strong><br>
&nbsp; &nbsp; – Associate in Arts Degree – Digital Arts Major <span style="float:right">(pending)</span><br>
<br>&nbsp; Certificate of Achievement<br>
&nbsp; &nbsp; – Graphic Design and Production Option <span style="float:right">(pending)</span><br>
<br>&nbsp; Certificate of Specialization<br>
&nbsp; &nbsp; – Graphic Design Foundation <span style="float:right">6/2014</span><br>
&nbsp; &nbsp; – Graphic Design Advanced Production <span style="float:right">(pending)</span><br>
</ul>

这是一个 JSFiddle Click here

【讨论】：