Question

我在使用跨度来区分div中的单词时遇到了麻烦。这是html：

<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

和css：

.footer-links{
    float: right;
    margin-top: 11px;
    margin-bottom: 11px;
}

JS小提琴她==＆gt; https://jsfiddle.net/kxdnwL4k/3/

如何对单词进行空格化以便用户更容易阅读？

非常感谢

Answer 1

只需向margin添加水平span即可。您可以使用:not(:first-child)或span + span

排除第一个

.footer-links {
  margin: 11px 0;
  float: right;
}
.footer-links span:not(:first-child) {
  margin-left: 1em;
}

<div class="footer-links">
  <span><a href="#">Suggestions</a></span>
  <span><a href="#">Help</a></span>
  <span><a href="#">Contact us</a></span>
</div>

Answer 2

我假设你的意思是这些词太接近了。

.footer-links{
	float: right;
	margin-top: 11px;
	margin-bottom: 11px;
  word-spacing: 5px;
  letter-spacing: 2px;
}

<div class="footer-links">
                    <span><a href="#">Suggestions</a></span>
                    <span><a href="#">Help</a></span>
                    <span><a href="#">Contact us</a></span>
                </div>

我使用letter-spacing来区分字母，word-spacing在字之间加一些空格。

Answer 3

为什么不使用public class Puzzle4 { public static void main(String[] args) { Puzzle4b[] obs = new Puzzle4b[6]; int y = 1; int x = 0; int result = 0; // let's break out of the loops obs[0] = new Puzzle4b(); obs[0].ivar = 1; obs[1] = new Puzzle4b(); obs[1].ivar = 10; obs[2] = new Puzzle4b(); obs[2].ivar = 100; obs[3] = new Puzzle4b(); obs[3].ivar = 1000; obs[4] = new Puzzle4b(); obs[4].ivar = 10000; obs[5] = new Puzzle4b(); obs[5].ivar = 100000; // ivar's = 1, 10, 100, 1000, 10000, 100000 result = result + obs[5].doStuff(5); // 0 + (5 * 100000) result = result + obs[4].doStuff(4); // 500000 + (4 * 10000) result = result + obs[3].doStuff(3); // 540000 + (3 * 1000) result = result + obs[2].doStuff(2); // 543000 + ((5 - 2) * 100) result = result + obs[1].doStuff(1); // 543300 + ((5-1) * 10) result = result + obs[0].doStuff(0); // 543340 + ((5-0) * 1) // result = 543345 } System.out.println("result " + result); } } class Puzzle4b { int ivar; public int doStuff(int factor) { if (ivar>100) { return ivar*factor; } else { return ivar*(5-factor); } } } css属性让它们看起来更清晰？

margin

.footer-links a {
  margin: 0 5px 0 5px;
}

.footer-links {
  float: right;
  margin-top: 11px;
  margin-bottom: 11px;
}

.footer-links a {
  margin: 0 5px 0 5px;
}

Answer 4

我建议在链接列表中使用ul - 它总是最好使用正确的工具来完成工作。

请注意，我已将此ul放入<footer>元素中 - 如果您未使用HTML5文档类型，请使用div。然后它只是一个应用保证金到ul lis的情况，你有一个水平列表与间隔的li。

您也可以使用“活跃”类来反映当前页面的li。然后，您将获得一个页脚链接列表，这些页脚间距与您的页面相关。

.footer-links {
  list-style:none
}

.footer-links li {
display:inline;
margin-right:30px
}

<footer>
  <ul class="footer-links">
    <li><a href="#">Suggestions</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
 </footer>

如何使用跨度来区分div中的单词

4 个答案: