Question

我正在尝试使用CSS水平对齐（使等距）多个元素。

我实现了它并且运行得相当好：

.container {
    text-align: justify;
}

.box {
    display: inline-block;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

和

<div class="container"><div class="box">&#32;</div><div class="box">&#32;<div class="box"></div>

然而，我注意到它取决于每个元素被空格分隔。基本上，我需要能够在突破新线之前能够紧挨着挤压元素，但是空间可以防止这种情况发生。如果从示例中删除空格，则对齐的内容会中断。

是否有一个HTML实体可以放置在能够保持等距的元素之间？

编辑：我特意问，因为零宽度空间不起作用。 1px实体会很好，但是，我缺乏关于那个的unicode知识。

编辑：澄清一下，我正在寻找一个0px或1px的html实体。即使它不是空间（我可以隐藏它）。

Answer 1

听起来像你想要的a zero-width space：

&#8203;

编辑：我特意问，因为零宽度空间不起作用。 1px实体会很好，但是，我缺乏关于那个的unicode知识。

在这种情况下，这样的事情就足够了：

<span style="display: inline-block; width: 1px; overflow: hidden;"> </span>

Answer 2

CSS Text说

字分隔符 包括空格（U + 0020），不间断空格（U + 00A0），Ethiopic字空间（U + 1361），爱琴海字分隔符（U + 10100，U + 10101），Ugaritic字分频器（U + 1039F）和腓尼基文字分隔符（U + 1091F）。如果有没有单词分隔符，或者单词分隔符有零前进宽度（例如零宽度空间U + 200B）然后是用户代理不得在单词之间创建额外的间距。一般标点符号和固定宽度的空格（例如U + 3000和U + 2000到 U + 200A）不被视为字分隔符。

所以唯一的可能性是 （）， （），፡（፡），{{1 （𐄀），?（𐄁），?（𐎟），?（𐤟）。< / p>

但相反，我推荐使用flexbox。

＆＃13;

#container {
  display: flex;
  justify-content: space-between;
  border: 2px dashed #444;
  height: 125px;
  min-width: 600px;
}
.box1, .box2, .box3, .box4 {
  width: 150px;
  height: 125px;
  flex: none;
}
.box1, .box3 {
  background: #ccc
}
.box2, .box4 {
  background: #0ff
}

＆＃13;

或者，对于旧版浏览器，您可以使用带有<div id="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div>的内联元素。

＆＃13;

font-size: 0

＆＃13;

#container {
  text-align: justify;
  text-align-last: justify;
  border: 2px dashed #444;
  height: 125px;
  min-width: 600px;
}
.box1, .box2, .box3, .box4 {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 125px;
}
.box1, .box3 {
  background: #ccc
}
.box2, .box4 {
  background: #0ff
}
#container > span {
  font-size: 0;
}

＆＃13;

Answer 3

对于那些寻求解决方案的人：

<span style="font-size: 0;">&#32;</span>

似乎尽可能接近零。

最薄的HTML实体，不会破坏文本对齐

3 个答案: