css - 使用 div 在冒号后水平和垂直排列文本元素

Question

鉴于我在 CSS 中有如下所示的元素:

Event Starts: 26 October 2013

Event Ends: 28 October 2013

Location: The Neigh Court Yard, London, E19 4AF

我如何在 CSS 中垂直/水平排列它们，使其看起来像这样:

Event Starts:   26 October 2013

Event Ends:     28 October 2013

Location:       The Neigh Court Yard, London, E19 4AF

到目前为止的代码:

        <div class="fb">
        Event Starts: 26 October 2013<br>
        Event Ends: 28 October 2013<br>
        Location: The Neigh Court Yard, London, E19 4AFF<br>
        Please note that this event has already taken place.
        </div>

Answer 1

给你:

http://fiddle.jshell.net/ghmtzrr5/

<table class="fb">
    <tr>
        <td class="firstCell">
        Event Starts:
        </td>
        <td>
             26 October 2013
        </td>
    </tr>
    <tr>
       <td class="firstCell">
        Event Ends: 
        </td>
        <td>
            28 October 2013
        </td>
    </tr>
    <tr>
        <td class="firstCell">
        Location: 
        </td>
        <td>
            The Neigh Court Yard, London, E19 4AFF
        </td>
    </tr>
    <tr>
        <td colspan="2">
        Please note that this event has already taken place.
        </td>
    </tr>
</table>

table td
{
border: 1px solid black;
}

.firstCell
{
width: 100px;
}

//更新，没有表格

http://fiddle.jshell.net/ghmtzrr5/1/