删除Ul提醒

Question

我有三个人在一条线上。如果移除了另一个ul，我如何将ul滑动到左侧。以下是它的外观示例。 （如果可能的纯Javascript）。

＆＃13;

＆＃13;

.one {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  background-color: red;
  color: #fff;
}
.two {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  background-color: green;
  color: #fff;
}
.three {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  background-color: blue;
  color: #fff;
}
.closebtn {
  float: right;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}
.closebtn:hover {
  color: #000;
}
ul {
  width: 25%;
  display: inline-block;
}

＆＃13;

<ul>
<li class="one">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="two">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="three">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
</ul>
<ul>
<li class="one">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="two">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="three">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
</ul>
<ul>
<li class="one">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="two">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="three">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

而不是ul上的宽度，您可以使用max-width。查看下面的更新代码段

＆＃13;

＆＃13;

.one {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  background-color: red;
  color: #fff;
}
.two {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  background-color: green;
  color: #fff;
}
.three {
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
  background-color: blue;
  color: #fff;
}
.closebtn {
  float: right;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}
.closebtn:hover {
  color: #000;
}
ul {
  max-width: 25%;
  display: inline-block;
}

＆＃13;

<ul>
<li class="one">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="two">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="three">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
</ul>
<ul>
<li class="one">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="two">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="three">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
</ul>
<ul>
<li class="one">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="two">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
<li class="three">
  <span onclick="this.parentElement.style.display = 'none';" class="closebtn">&times;</span>
  <p>To close this container, click on the X symbol to the right.</p>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;