Question

I've been having trouble aligning the terms of service and privacy policy message under the signup button of my page.

标记

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

我试过浮动剩下的所有元素，显示：inline-block，但似乎没有任何东西可以完美地对齐单词，特别是在调整浏览器窗口大小时。这可能是一个非常明显的问题，但我确定你们可以指出我正确的方向并帮助我解决这个问题。谢谢！

Answer 1

您的代码有边距，使得文字显示与锚标记不一致。

说实话，我只是将链接放在标记内，如下所示，然后您不必担心从.signupterms {text-align:left; float:left; display:inline-block;} .signupterms a {text-decoration:none; color:#000; }标记中删除边距

＆＃13;

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

＆＃13;

SELECT u.id, i.id FROM users as u, items as i
ORDER BY RAND() LIMIT {smallest table size}

＆＃13;

Answer 2

如何使用？

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

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

Answer 3

p代码具有默认margin。将margin:0;添加到p即可将其删除。

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

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> tag link without spacing issues

4 个答案: