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

Question

I am working on my about page and having trouble with this. Trying to align the (years or pending) to the right side of the column. See image for example.

Top is how it looks now. Bottom image is how I want it to look.

Site is located at http://www.eatlovepray.me/portfolio/about-me/

Answer 1

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

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

Answer 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>

Answer 3

Here you go

<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>

Here's a JSFiddle Click here