在右心室做ul对齐

Question

感谢您查看我的问题。

我想知道如何在div的右侧垂直对齐ul。我只是不太了解CSS和HTML。谁能帮我吗？？ ul是水平的，并且希望它是垂直的，如附图所示。

CSS

#userStats { display: block; width: auto; background-color: #f9f9f9; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 12px; }

#userStats .pic { float: left; display: block; margin-right: 10px; }
#userStats .pic a img { padding: 7px; background: #fff; border: 1px solid #ccc; }

#userStats .data {
    float: left;
    display: block;
    position: relative;
    width: 515px;
    height: 166px;
    padding: 4px;
    padding-left: 15px;
    background: #e6e6e6;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#userStats .data h1 { color: #474747; line-height: 1.6em; text-shadow: 0px 1px 1px #fff; }
#userStats .data h3 { color: #666; line-height: 0.9em; margin-bottom: 5px; }
#userStats .data h4 { font-size: 1.2em; line-height: 1.3em; }

#userStats .data .socialMediaLinks { position: absolute; right: 6px; top: 8px; }
#userStats .data .socialMediaLinks a img { margin-right: 5px; }

#userStats .data .sep { clear: both; margin-top: 20px; width: 485px; height: 1px; border-bottom: 1px solid #ccc; margin-bottom: 0; }
#userStats .data ul.numbers { list-style: none; width: 320px; padding-top: 7px; margin-top: 0; border-top: 1px solid #fff; color: #676767; }
#userStats .data ul.numbers li { width: 95px; float: left; display: block; padding-left: 8px; height: 50px; border-right: 1px dotted #bbb; text-transform: uppercase; }
#userStats .data ul.numbers li strong { color: #434343; display: block; font-size: 3.4em; line-height: 1.1em; font-weight: bold; }

HTML

<div class="data">
 <h1>Bill Gates</h1>
 <h3>CEO of Microsoft Corporation</h3>
 <h3>San Francisco, CA</h3>
 <h4><a href="http://spyrestudios.com/">http://spyrestudios.com/</a></h4>
 <div class="socialMediaLinks">
    <a href="http://twitter.com/jakerocheleau" rel="me" target="_blank">
      <img src="img/twitter.png" alt="@jakerocheleau" />
    </a>
    <a href="http://gowalla.com/users/JakeRocheleau" rel="me" target="_blank">
       <img src="img/gowalla.png" />
    </a>
  </div>
<div class="sep"></div>
  <ul class="numbers clearfix">
    <li>Reputation<strong>185</strong></li>
    <li>Checkins<strong>344</strong></li>
    <li class="nobrdr">Days Out<strong>127</strong></li>
  </ul>
</div>

Answer 1

只需将列表浮动到右侧

即可

.numbers {
    float:right;
}

<强> FIDDLE

Answer 2

给你的UL

浮动

.numbers { float:right }