使用CSS将文本左右对齐放在同一行

Question

我正在制作我的关于页面，并且在这方面遇到了麻烦。试图将“年份或待定”对齐到列的右侧。请参见以下示例图片。

上面是当前的外观。底部图像是我想要的外观。

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

- user3808918

Answer 1

尝试使用 span，然后将样式设置为 'float:right'

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

- Haoyu Chen

---

哇，谢谢啊。我花了三天时间玩弄CSS、DIV样式、边距等等，甚至都没能成功。你的方法简单明了，而且非常有效。完美解决了问题。 - user3808918

另外，请查看http://jsfiddle.net/N4JZy/以查看其实际效果。我的示例使用div而不是span，但很多人比我更快地到达了这里。 - redditor

谢谢。这个CSS也清理了我的一些混乱。因为我复制粘贴了很多代码，所以有很多不必要的代码。 - user3808918

@user3808918 请尽量避免使用内联的 style 属性，而是使用 .class。 - hitautodestruct

@user3808918，你对内联样式有什么意见吗？就我个人而言，我发现内联样式比不断参考某些内部/外部的.css样式命令要容易得多。 - user3629249

Answer 2

演示

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>

- 4dgaurav

Answer 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 点击这里

- phoenixinobi