我在这里完成了以下代码“ https://liveweave.com/uRJjZM#&togetherjs=dLyJTGm2R4 ”
我试图在第一列之前和最后一列之后删除列之间的空间，基本上将所有内容并排堆叠，任何地方都没有空格。我已经尝试使用 no-gutter，如在之前对类似问题的堆栈溢出答案中找到的那样。但是，我无法让它工作。如何去除空格？
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.ui-effects-transfer
{
border: 2px
dotted gray;
}
.login-page
{
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form
{
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input
{
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4778b7;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus
{
background: #4778b7;
}
.form .message
{
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a
{
color: #4CAF50;
text-decoration: none;
}
.form .register-form
{
display: none;
}
.container
{
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after
{
content: "";
display: block;
clear: both;
}
.container .info
{
margin: 50px auto;
text-align: center;
}
.container .info h1
{
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span
{
color: #4d4d4d;
font-size: 12px;
}
.container .info span a
{
color: #000000;
text-decoration: none;
}
.container .info span .fa
{
color: #EF3B3A;
}
body
{
background: #4778b7; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #4778b7, #4778b7);
background: -moz-linear-gradient(right, #4778b7, #4778b7);
background: -o-linear-gradient(right, #4778b7, #4778b7);
background: linear-gradient(to left, #4778b7, #4778b7);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
</style>
<div id="grid" class="container-fluid">
<div class="row no-gutter">
<div class="col-md-2">
<ul id="column_1">
<div class="list-group"></div>
</ul>
</div>
<div class="col-md-2 ">
<ul id="column_2">
<div class="list-group"></div>
</ul>
</div>
<div class="col-md-2 ">
<ul id="column_3">
<div class="list-group"></div>
</ul>
</div>
<div class="col-md-2 ">
<ul id="column_4">
<div class="list-group"></div>
</ul>
</div>
<div class="col-md-2">
<ul id="column_5">
<div class="list-group"></div>
</ul>
</div>
</div>
</div>
<script>
document.getElementById("column_1").innerHTML = "";
document.getElementById("column_1").innerHTML="<span style='color:#FFFFFF'> Account Group </span>";
for (prop = 0; prop < 10; prop++)
{
document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>';
}
function myFunction2(e)
{
test = e;
console.log(e);
document.getElementById("column_2").innerHTML = "";
document.getElementById("column_2").innerHTML="<span style='color:#FFFFFF'> GL Accounts </span>";
document.getElementById("column_3").innerHTML = "";
document.getElementById("column_3").innerHTML="<span style='color:#FFFFFF'> GL Balance </span>";
document.getElementById("column_4").innerHTML = "";
document.getElementById("column_4").innerHTML="<span style='color:#FFFFFF'> GL Name </span>";
document.getElementById("column_5").innerHTML = "";
for (prop3 = 0; prop3 < 20; prop3++)
{
document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>';
}
}
function myFunction4(e)
{
test = e;
console.log(e);
document.getElementById("column_5").innerHTML = "";
document.getElementById("column_5").innerHTML="<span style='color:#FFFFFF'> Breakdown </span>";
for (prop5 = 0; prop5 < 5; prop5++)
{
document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + ' class="list-group-item" onclick="myFunction5(this.id)">' + "Breakdown " + prop5 + '</button></div>';
}
}
function myFunction5(e)
{
test = e;
console.log(e);
window.open("", "", "width=500,height=500");
}
</script>
你那里有语法错误。根据 w3c， ul 应该只有<li>元素，因为它是孩子。
尝试将 ul 更改为 div，如下所示：<ul id="column_1">to<div id="column_1">等。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句