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表示链接，跨度表示非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/

这个主体div中同一行上的两个链接？

1 个答案: