如何在 <a> 标签 link 旁边对齐 标签而不出现间距问题

Question

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

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，但似乎没有任何东西可以完美对齐单词，尤其是在调整浏览器大小时 window。这可能是非常明显的问题，但我相信你们可以指出正确的方向并帮助我解决这个问题。谢谢！

Answer 1

使用  怎么样？

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

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

Answer 2

p 标签有一个默认值 margin。通过将 margin:0; 添加到 p.

来删除它

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

Answer 3

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

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

.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>

Answer 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

如何在 <a> 标签 link 旁边对齐 <p> 标签而不出现间距问题

How to align a <p> tag next to an <a> tag link without spacing issues

html

css

css-float

text-alignment