嗨，我正在构建一个基本的UI，其中我有一个无序列表，其中有三个列表，我的代码如下
<!DOCTYPE html>
<html>
<body>
<ul style="padding-bottom:30px;display:flex;">
<li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding-left:30;"><a href="WorkingHours.html" target="iframea">Working hours</a>
</li>
<li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.8;"><a href="overspeed.html" target="iframea">overspeed</a>
</li>
<li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.8;"><a href="costanalysis.html" target="iframea">Cost Analysis</a>
</li>
</ul>
<iframe id='iframea' name='iframea' style='width:100%;height:300px;border-radius:25px;padding-top:100px;opacity:0.8;box-shadow: 10px 10px 5px black;border:2px solid #fff;background-color:#88ff4d'>
</iframe>
</body>
</html>但是我面临的问题是，当将所有内容作为选项卡排成一行时，子弹无法正确放置，如您在图像中所见
最佳答案
list-style-position: inside;会将子弹移入内部。
ul {
list-style-position: inside;
}
/* DEMO */
ul {
display: flex;
}
li {
border: solid 1px;
margin: .7em;
padding: .4em;
}<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>