在这个body div的同一行上有两个链接？

Question

我有以下 div

#body {
    line-height:1.5em;
    width:700px;  
    margin:auto; 
    overflow-x: hidden; 
    padding:12.5px;
    color:#4e443c;
    font-size:16px;
    font-family:"Courier";
    display:table;
}

在正文中，我有多个链接，其中一些有效，而另一些无效。经过快速搜索，我发现display:inline-block 可以解决这个问题；但是，我的 div 将不再以页面为中心。另一个快速的谷歌搜索让我尝试将display:inline-block 与text-align:center 结合使用，但这也引起了问题，因为 div 中的文本现在居中，而不是离开。

有没有什么办法可以用居中的 div 来做到这一点，文本左对齐？

我的 HTML 只是一个带有文本的简单 div。

<div id="body">
      Text here. <a href="http://google.com">Example link</a>. <a href="http://google.com">Another</a> example.
</div>

Answer 1

您可以通过使用边距进行放置，然后在所有内部元素周围使用标签来实现这一点（a 用于链接，span 用于非href）。

以下示例；

html

<div id="body">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <span>Link</span>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>

css

#body {
    margin: 0px auto;
    width: 400px;
    border: solid 1px red;
}
#body a, #body span {
    display: inline-block;
    width: 100%;
    text-align: left;
    line-height: 1.7em;
}

示例

http://jsfiddle.net/MrMarlow/bqew7L09/3/