如何调整这个UI的子弹，但我需要子弹

你好我建设，我有一个undordered列表，其中三甲之列是有我的代码如下如何调整这个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>

基本UI

，但我面临的问题是，虽然让所有在一行中的选项卡中的子弹没有正确安装，你可以在图像

来源

2016-02-01 deepak arya

的[极品没有任何子弹的无序列表（http://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets可能的复制） – timo

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>

来源

2016-02-01 10:32:04 Aaron

得到了答案，谢谢它的工作原理:) –

不客气，我不确定其他人是否正确阅读您的问题。 – Aaron

看到如果我没有理解这个问题ç或者，将此CSS添加到您的UL：

ul { 
list-style: none; 
padding-left: 0; 
}

来源

2016-02-01 10:27:24

我想要那些子弹，但它应该完全适合 –

试试这个，但我强烈建议您在编码时使用外部css文件。

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <ul style="padding-bottom:30px;display:flex;padding:0;list-style-position: inside;"> 
 
    <li style="width:300px;height:50px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;"><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> 
 

 
    <script> 
 
    </script> 
 
</body> 
 

 
</html>

来源

2016-02-01 10:28:33 user2584538

实际上我想要在子弹外面的子弹与这我进去??这有可能吗？ –

你想要哪种方式..？ – user2584538

感谢您的帮助，但我通过@aaron –

使用list-style-position: inside;里面放置子弹。从<li>中删除高度并为<li>添加填充顶部和填充底部。

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <ul style="padding-bottom:30px;display:flex;"> 
 
    <li style="width:300px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding:15px 0;list-style-position: inside;"><a href="WorkingHours.html" target="iframea">Working hours</a> 
 
    </li> 
 
    <li style="width:300px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding:15px 0;list-style-position: inside;"><a href="overspeed.html" target="iframea">overspeed</a> 
 
    </li> 
 
    <li style="width:300px;text-align:center;box-shadow: 10px 10px 5px black;border-radius:5px;opacity:0.7;padding:15px 0;list-style-position: inside;"><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> 
 

 
    <script> 
 
    </script> 
 
</body> 
 

 
</html>

来源

2016-02-01 10:35:14

如何调整这个UI的子弹，但我需要子弹

回答

相关问题