スクリーンショットのようにいくつかのデータを表示するために、以下のhtmlとcssがあります。white-space: nowrap;次に追加すると、テキストは箱から出して移動します（最初のスクリーンショット）。使用しない場合は、折り返されますが、ボックスの配置が妨げられます（スクリーンショットの2行目）。
ボックスの幅を増やさずにこれを修正するために設定できるプロパティはありますか？表示プロパティも試しましたが、今のところうまくいきません。
<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>
あなたが使用しているinline-block、あなたが使用する必要がありvertical-align:top、デフォルトの整列があるとして、アライメントを維持しますbaseline。
.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;
}
.sideBarList li::before {
content: '';
position: absolute;
top: 25px;
left: -8em;
width: 8em;
height: .2em;
background: skyblue;
z-index: -1;
}<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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加