javascript - 如何在不扭曲文本的情况下将文本中心与无序列表对齐？

Question

我喜欢在顶部显示图像背景的无序列表文本中心。但不幸的是，我的文字扭曲了。我不知道为什么会这样。请修复我的代码。

我的代码，

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.image {
  width:100%;
  height:200px;
}
.container {
  position: relative;
  color: white;
  height:200px;
  width:100%;
}
.title {
    font-family: Ubuntu;
    font-weight: bold;
    font-size: 30px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.title ul li {
    display: inline-block;
    list-style:none;
    letter-spacing:0px;
}
</style>

<div class="container">     
<img src="image.jpg" class="image">
 <div class="title" >
        <ul>
            <li>S</li>
            <li>o</li>
            <li>m</li>
            <li>e</li>
            <li>T</li>
            <li>e</li>
            <li>x</li>
            <li>t</li>
            <li>H</li>
            <li>e</li>
            <li>r</li>
            <li>e</li>
        </ul>
    </div>
</div>

预期输出， 图 1

/image/0zHnW.jpg

(图 1:上面的图像是使用照片编辑器编辑的，以显示我的预期输出)

但是，我得到的输出Fig2

/image/ZzMeW.jpg

(图2:上面的图片是我实际得到的原始输出的屏幕截图)

我不知道我做错了什么。请修复我的代码并解释一下。我的需要是，列表显示在图像背景的中心同一行而不变形。

Answer 1

因为你的单词的每个字母都是单独的<li>标签，可以解决这个问题的一件事如下。

.container .title ul {
  display: flex
  flex-wrap: nowrap;
}

这里添加以下 css 也是有益的:

.title {
  display: flex;
  justify-content: center;
  width: 100%;
}

这将调整标题容器的大小以适合整个屏幕，但目前并非如此。

此外，在演示页面中，您仍然需要添加 display: flex;给您<ul> .

从我在检查器中看到的情况来看 - 执行这些操作应该可以解决您的问题。