我的布局目前看起来像这样
在中心栏中,我想在每个ServerDiv 之间添加一个小边距。但是,如果我在 CSS 中添加边距,它最终会换行并看起来像这样
Server
<div class="row info-panel"> <div class="col-md-4 server-action-menu" id="server_1"> <div> Server 1 </div> </div> <div class="col-md-4 server-action-menu" id="server_2"> <div> Server 2 </div> </div> <div class="col-md-4 server-action-menu" id="server_3"> <div> Server 3 </div> </div> <div class="col-md-4 server-action-menu" id="server_4"> <div> Server 4 </div> </div> <div class="col-md-4 server-action-menu" id="server_5"> <div> Server 5 </div> </div> <div class="col-md-4 server-action-menu" id="server_6"> <div> Server 6 </div> </div> <div class="col-md-4 server-action-menu" id="server_7"> <div> Server 7 </div> </div> </div>
和 CSS
.server-action-menu { background-color: transparent; background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%); background-repeat: repeat; border-radius:10px; } .info-panel { padding: 4px; }
我试图通过这样做来添加边距
.info-panel > div { margin: 4px; }
如何为 DIV 添加边距,以便它们不会在右侧留下太多空间?
您应该使用内部容器上的填充而不是边距。尝试这个!
HTML
<div class="row info-panel"> <div class="col-md-4" id="server_1"> <div class="server-action-menu"> Server 1 </div> </div> </div>
CSS
.server-action-menu { background-color: transparent; background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%); background-repeat: repeat; border-radius:10px; padding: 5px; }