2

我有两个单词元素，它们应该在同一行，并且仅当它们在同一行时才由 char/image 分隔。文本必须居中。

我当前的解决方案适用于除 Safari 之外的所有浏览器，因为如果设置了字间距，Safari 将无法正确居中文本。

问题示例：https ://jsfiddle.net/k275f1ph/

HTML：

<ul class="test">
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>
<br/>
<ul>
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>

CSS：

ul {
  display: block;
  width: 120px;
  border: 1px solid black;
  margin: 0;
  padding: 0;
  text-align: center;
  word-spacing: 10px;
}

ul.test {
  width: 300px;
}

li {
  display: inline;
  word-spacing: 0;
  position: relative;
  &:not(:last-child):after {
    content: " ";
    position: relative;
    background-image: url("https://static01.20min.ch/dyim/5dd8a8/T470,230/images/content/2/7/1/27109470/10/teaserbreit.jpg");
    width: 6px;
    height: 6px;
    word-spacing: 20px;
  }
}

span {
  display: inline-block;
}

如您所见，仅在 Safari 中，文本不以上部元素为中心。

如何解决这个问题？

4

0 回答 0