html - 如何在 标签链接旁边对齐 标签而不出现间距问题

Question

我一直无法协调服务条款和隐私条款我页面注册按钮下的政策消息。

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;}

我试过 float 所有左边的元素，display:inline-block，但似乎没有什么能完美地对齐单词，尤其是在调整浏览器窗口大小时。这可能是非常明显的问题，但我相信你们可以指出正确的方向并帮助我解决这个问题。谢谢!

Answer 1

你的 <p>标签有边距，这使得文本看起来与 anchor 标签不一致。

说实话，我只是把链接放在<p>里面像下面这样的标签，然后你就不需要担心从 <p> 中删除边距了。标签。

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