Html 如何在不破坏CSS对齐的情况下修复文本换行？_Html_Css

Html 如何在不破坏CSS对齐的情况下修复文本换行？

html css

Html 如何在不破坏CSS对齐的情况下修复文本换行？,html,css,Html,Css,我有下面的html和css，以显示一些数据作为截图。如果我添加空白：nowrap；然后文本从框中移出第一个屏幕截图。如果我不使用，那么它会包装，但会干扰屏幕截图第二行的框对齐我可以设置任何属性来修复此问题而不增加框的宽度吗？我也尝试过显示属性，但到目前为止没有运气 <html> <head> <meta charset="UTF-8"/> <style> .sideBarList li { width: 12%;

我有下面的html和css，以显示一些数据作为截图。如果我添加空白：nowrap；然后文本从框中移出第一个屏幕截图。如果我不使用，那么它会包装，但会干扰屏幕截图第二行的框对齐

我可以设置任何属性来修复此问题而不增加框的宽度吗？我也尝试过显示属性，但到目前为止没有运气

<html>      
  <head>
    <meta charset="UTF-8"/>
 <style>
.sideBarList li {
  width: 12%;
  height: 50px;
  text-align: center;
  line-height: -10px;
  border-radius: 10px;
  background: skyblue;
  margin: 0 10px;
          white-space: nowrap;
  display: inline-block;
  color: black;
  position: relative; 
  text-align: center;
  font-family: Arial;
  font-size: 11px;
}

.sideBarList li::before{
  content: '';
  position: absolute;
  top: 25px;
  left: -8em;
  width: 8em;
  height: .2em;
  background: skyblue;
  z-index: -1;
}

   </style>

   </head>
  <body>

  <ul class="sideBarList">
        <li class="li">Hi There</li>  
        <li class="li">Hi There</li> 
        <li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li> 
 </ul>
  </body>
</html>

如果使用的是内联块，则需要使用“垂直对齐：顶部”来保持对齐，因为默认对齐是基线

李先生{ 宽度：12%；高度：50px；文本对齐：居中；线高：-10px；边界半径：10px；背景：天蓝色；利润率：0.10px；显示：内联块；垂直对齐：顶部；颜色：黑色；位置：相对位置；文本对齐：居中；字体系列：Arial；字体大小：11px； } .侧边栏列表李：：之前{ 内容：；位置：绝对位置；顶部：25px；左：-8em；宽度：8em；高度：.2米；背景：天蓝色； z指数：-1； } 你好你好 ABC DEF GHI TYTYT YTYYT IIIOO

仅将您的.sideBarList li更新到此

.sideBarList li {
   width: 12%;
  height: 50px;
  text-align: center;
  line-height: -10px;
  border-radius: 10px;
  background: skyblue;
  margin: 0 10px;
  display: inline-block;
  vertical-align: top;
  color: black;
  position: relative;
  text-align: center;
  font-family: Arial;
  font-size: 11px;
}

显示：内联flex也可以工作。请查收

李先生{ 宽度：12%；高度：50px；文本对齐：居中；线高：-10px；边界半径：10px；背景：天蓝色；利润率：0.10px；显示：-webkit内联框；显示：-ms内联flexbox；显示：内联flex； -webkit盒包：中心； -ms-flex-pack:center；证明内容：中心； -webkit框对齐：居中； -ms-flex-align：居中；对齐项目：居中；垂直对齐：顶部；颜色：黑色；位置：相对位置；文本对齐：居中；字体系列：Arial；字体大小：11px； } .侧边栏列表李：：之前{ 内容：；位置：绝对位置；顶部：25px；左：-8em；宽度：8em；高度：.2米；背景：天蓝色； z指数：-1； } 你好你好 ABC DEF GHI TYTYT YTYYT IIIOO 使用这种样式

ul {
   display: flex;
}

李先生{ 宽度：12%；高度：50px；文本对齐：居中；线高：-10px；边界半径：10px；背景：天蓝色；利润率：0.10px；空白：正常；显示：内联块；颜色：黑色；位置：相对位置；文本对齐：居中；字体系列：Arial；字体大小：11px； } .侧边栏列表李：：之前{ 内容：；位置：绝对位置；顶部：25px；左：-8em；宽度：8em；高度：.2米；背景：天蓝色； z指数：-1； } 保险商实验室{ 显示器：flex； } 你好你好 ABC DEF GHI TYTYT YTYYT IIIOO

谢谢你，保利！我已经标出了答案。你介意帮我提一个小问题吗？我必须在连接线上显示一些文本。你知道如何添加文字字体、大小和css吗？如果我添加任何标记，它将转到下一行。嗨，这里嗨，这里是另一个问题。这将取决于文本的意图以及它与列表项的关系。也许可以用一幅你想做什么的图像来问另一个问题。