Question

我似乎无法更改清单的宽度。我正在尝试减小宽度，并在清单项目周围留有一定的余量，但是它不起作用。这是我到目前为止的内容：https://jsfiddle.net/h64f1otw/1/

我的清单的摘录：

.checkList {
  list-style-image: url('http://i66.tinypic.com/6nv3me.png');
  columns: 2 4em;
}

.checkList li{
  color: #fff;
}

我正在尝试实现以下目标：

Answer 1

我所做的是为ul元素添加display:flex，并在li元素上应用margin并将width:50%应用于每个

要使div居中，您需要在margin:0 auto类上添加heroInner，并在内容类上删除padding

.hero {
  position: relative;
  height: 44vh;
  max-height: 64rem;
  min-height: 28rem;
}

.background {
  background-image: url('https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2851&q=80');
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.overlay {
  background: linear-gradient(to right, #1d1d1d, rgba(0, 0, 0, 0));
  position: absolute;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
}

.inner {
  display: table-cell;
  width: 100%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  vertical-align: middle;
  text-align: center;
}

.content {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 62.25rem)
{
  .content {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.heroInner {
  text-align: left;
  max-width: 31rem;
  margin:0 auto;
}

.checkList {
  list-style-image: url('http://i66.tinypic.com/6nv3me.png');
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
}

.checkList li{
  color: #fff;
  margin-top: 30px;
}
.checkList li:nth-child(odd){
  width:30%;
}
.checkList li:nth-child(even){
  width:60%;
}

<div class="hero">
      <div class="background"></div>
      <div class="overlay">
        <div class="inner">
          <div class="content">
            <div class="heroInner">
              <div class="checkListContainer">
                <ul class="checkList">
                    <li>Long term leases</li>
                    <li>Bespoke solutions</li>
                    <li>Multi city campaigns</li>
                    <li>Measuring success with data</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

自定义清单的列宽度不起作用

1 个答案: