html - 在左侧对齐文本，但也在我的 div 的中心

Question

我试图在我的 div 中心对齐一些链接，但我也希望我的链接文本在左侧对齐。

但我没有成功，我可以向左或向中心对齐，但不能同时对齐。

你知道我们如何做到这一点吗？

这里我演示了我得到的结果:http://jsfiddle.net/HRKN4/

我有这个 html:

<div  class="container">
    <h3>Title:</h3>
    <div class="content">
       <ul class="links">
          <li> <a  href="#">&raquo;&raquo; This link is bigger</a></li>
          <li> <a  href="#">&raquo;&raquo; Smaller 1</a></li>
          <li> <a  href="#">&raquo;&raquo; link 1</a></li> 
       </ul>
     </div>
</div>

还有这个 CSS:

.container
{
    text-align:center;
    width:100%;
    margin:0 auto 0 auto;
    background:pink;
}

.content
{
    width:100%;
    height:300px;
}

.links 
{
    list-style-type:none;
    margin:0 auto; 
}

.links li a 
{
    text-decoration:none;
    background:red;
    color:#000;
    margin-top:20px;
    margin:0 auto; 
}

Answer 1

您可以使用表格布局:

.links {
   display:table;
}

和

.links li a {
   display:table-row;
}

Example

或者只是

.links li{
    text-align : left;
}

代替 display:table-row;

Example