html - 列表列不会将边框向下推？

Question

当窗口较小时，第一行的文字:

“文件格式(XLS、XLSX、CSV 或其他分隔符、ODS)”

不会将分隔边框向下推。

问题截图。

CSS:

.pricing-features-item {
  border-top: 2px solid #000000;
  font-size: 10px;
  line-height: 1.5;
  padding: 15px 0;
  text-transform: uppercase;
  text-align: left;
}

.col-tick {
  float: left;
  width: 10px;
}

.col-text {
  float: left;
  width: 90%;
}

HTML:

 <ul class="pricing-features">
    <li class="pricing-features-item">
      <div class="col-tick">
        +
      </div>
      <div class="col-text">
        File formats (xls, xlsx, csv or other delimited, ods)
      </div>
    </li>
    <li class="pricing-features-item">Dashboard hub</li>
    <li class="pricing-features-item">Data filters and validation</li>
    <li class="pricing-features-item">Premium data layout templates</li>
  </ul>

我该如何解决这个问题？

如果你能在这里修复它并发送链接就太棒了:)

https://jsfiddle.net/nusmsegn/2/

Answer 1

那是因为 .pricing-features-item 里面有 float 属性，给这个元素加上 width: 100%; 就可以解决你的问题，比如:

.pricing-features-item {
  float: left;
  width: 100%;
  border-top: 2px solid #000000;
  font-size: 10px;
  line-height: 1.5;
  padding: 15px 0;
  text-transform: uppercase;
  text-align: left;
}

看看下面的片段，或者看看 updated fiddle

html {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.pricing-background {
  padding: 120px 4% 4%;
  position: relative;
  width: 100%;
}

.pricing-background::after {
  content: '';
  background: #3498db;
  background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
  background: -webkit-linear-gradient(top, #3498db 0%, #4394f4 100%);
  background: linear-gradient(to bottom, #3498db 0%, #4394f4 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#4394f4', GradientType=0);
  height: 600px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

@media (min-width: 900px) {
  .background {
    padding: 0 0 25px;
  }
}

.pricing-container {
  margin: 0 auto;
  padding: 75px 0 0;
  max-width: 1280px;
  width: 100%;
}

.panel {
  background-color: #fff;
  border-radius: 5px;
  padding: ;
  position: relative;
  width: 100%;
  z-index: 10;
}

.pricing-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

@media (min-width: 900px) {
  .pricing-table {
    flex-direction: row;
  }
}

price .pricing-table * {
  text-align: center;
}

.pricing-desc {
  padding: 50px 150px 0 150px;
}

.pricing-item {
  border-top: 1px solid #e1f1ff;
  font-size: 10px;
  line-height: 1.5;
  padding: 15px 0 15px;
  text-transform: uppercase;
  text-align: left;
}

pricing-item:last-child {
  border-bottom: 1px solid #e1f1ff;
}

.pricing-plan {
  border-bottom: 2px solid #e0e0e0;
  padding: 50px;
}

.pricing-plan:last-child {
  border-bottom: none;
}

@media (min-width: 960px) {
  .pricing-plan {
    border-bottom: none;
    border-right: 1px solid #000000;
    flex-basis: 100%;
    padding: 25px 25px;
  }
}

.pricing-plan:last-child {
  border-right: none;
}

.pricing-plan-silver {
  border-bottom: 2px solid #282929;
  padding: 50px;
  background: #282929;
}

.pricing-plan-silver:last-child {
  border-bottom: none;
}

@media (min-width: 960px) {
  .pricing-plan-silver {
    border-bottom: none;
    border-right: 1px solid #f1f1f1;
    flex-basis: 100%;
    padding: 25px 25px;
  }
}

.pricing-plan-silver:last-child {
  border-right: none;
}

.pricing-img {
  padding: 20px;
  margin-bottom: 25px;
  max-width: 100%;
}

.pricing-header {
  color: #808080;
  font-weight: 600;
  letter-spacing: 1px;
}

.pricing-headerinfo {
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size: 32px;
  line-height: 48px;
  font-weight: 300px;
}

.pricing-features {
  color: #266a98;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 25px 0 25px;
  padding: 25px 10px 0 10px;
}

.col-tick {
  float: left;
  width: 10px;
}

.col-text {
  float: left;
  width: 90%;
}

.pricing-features-item {
  border-top: 2px solid #000000;
  font-size: 10px;
  line-height: 1.5;
  padding: 15px 0;
  text-transform: uppercase;
  text-align: left;
  float: left;
  width: 100%;
}

.pricing-features-item:last-child {
  border-bottom: 2px solid #e1f1ff;
}


/*## Gold list ##*/

.pricing-features-gold {
  color: #494742;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 25px 0 25px;
  padding: 25px 10px 0 10px;
}

.pricing-features-gold-item {
  border-top: 1px solid #e0d7c1;
  font-size: 10px;
  line-height: 1.5;
  padding: 15px 0;
  text-transform: uppercase;
  text-align: left;
}

.pricing-features-gold-item:last-child {
  border-bottom: 1px solid #e0d7c1;
}

<div class="pricing-background">

  <div class="pricing-container">

    <div class="panel pricing-table">

      <div class="pricing-plan">

        <ul class="pricing-features">
        
          <li class="pricing-features-item">
            <div class="col-tick">
              +
            </div>
            <div class="col-text">
              File formats (xls, xlsx, csv or other delimited, ods)
            </div>
          </li>
          <li class="pricing-features-item">Dashboard hub</li>
          <li class="pricing-features-item">Data filters and validation</li>
          <li class="pricing-features-item">Premium data layout templates</li>
          <li class="pricing-features-item">Scheduling</li>
          <li class="pricing-features-item">REST/API Connections (xml,   json)</li>
          <li class="pricing-features-item">FTP pickup / drop-off</li>
          <li class="pricing-features-item">Two-way synchronisation</li>
          <li class="pricing-features-item">Support</li>
          <li class="pricing-features-item">X</li>
        </ul>
      </div>




    </div>
  </div>
</div>

希望这对您有所帮助!