如何在 <a> 标签链接旁边对齐 标签而没有间距问题答案

【问题标题】：How to align a tag next to an <a> tag link without spacing issues如何在 <a> 标签链接旁边对齐 标签而没有间距问题
【发布时间】：2015-11-11 21:32:57
【问题描述】：

我在调整服务条款和隐私权时遇到了问题我页面的注册按钮下的政策消息。

http://jsfiddle.net/jyfvLrb3/

HTML：

<div class="signupterms"> <p>By clicking the sign up button you agree that you read the site's</p> <span><a href="terms.html">Terms of service</a></span><a href="privacy.html">Privacy Policy</a><p>and</p><a href="cookies.html">Cookie use</a>  
</div>

CSS：

 .signupterms {text-align:left; float:left; display:inline-block;}

.signupterms a {float:left; text-decoration:none; color:#000; }

.signupterms p {float:left; margin-left:4px;}

我尝试将所有元素向左浮动，display:inline-block，但似乎没有任何东西可以完美地对齐单词，尤其是在调整浏览器窗口大小时。这可能是很明显要解决的问题，但我相信你们可以为我指出正确的方向并帮助我解决这个问题。谢谢！

【问题讨论】：

标签： html css css-float text-alignment

【解决方案1】：

您的 标签有边距，这使得文本与锚标签不一致。

老实说，我只是将链接放在 标记内，如下所示，然后您无需担心从 标记中删除边距。

.signupterms {text-align:left; float:left; display:inline-block;}

.signupterms a {text-decoration:none; color:#000; }

<div class="signupterms">
    <p>
        By clicking the sign up button you agree that you read the site's <a href="terms.html">Terms of service</a> <a href="privacy.html">Privacy Policy</a> and <a href="cookies.html">Cookie use</a>
    </p>
</div>

【讨论】：

谢谢，这正是我想要对齐文本的方式。我完全忘记了将所有内容都放在 p 标签中的选项。干得好！

【解决方案2】：

使用 怎么样？

http://jsfiddle.net/jyfvLrb3/1/

 是一个带有一些预定义样式的块元素，因此最好使用一些不带任何属性的内联元素，例如

【讨论】：

【解决方案3】：

p 标签有一个默认的margin。通过将margin:0; 添加到p 来删除它。

.signupterms p {float:left; margin-left:4px; margin:0;}

【讨论】：

【解决方案4】：

 标签默认有显示块和边距... 只需将一个用于第一个语句，然后像这样跨越到单独的链接：

.signupterms {
    text-align:left;
    display:inline-block;
}
.signupterms a {
    text-decoration:none;
    color:#000;
}
.signupterms span {
    margin-left:4px;
    display:inline-block;
}

<div class="signupterms">
    <p>By clicking the sign up button you agree that you read the site's</p> <span><a href="terms.html">Terms of service</a></span>,<span><a href="privacy.html">Privacy Policy</a></span>&nbsp;and&nbsp;<span><a href="cookies.html">Cookie use</a></span> 
</div>

fiddle

【讨论】：