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内的浮动属性，使用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>

希望这有帮助！

Answer 2

只需从float:left移除col-text。

.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;
  margin-right: 8px;
}

.col-text {}

<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>

Answer 3

工作小提琴链接：https://jsfiddle.net/nusmsegn/4/

Float：left＆gt;从您的css文件中删除：

HTML：

<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>

CSS：

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 {

  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;
}

.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;
}

Answer 4

这是与float属性相关的问题。您已为子元素应用了float，而父级没有浮动

您可以通过两种不同的方式解决此问题，如下面

将float: left;应用于“.pricing-features-item”。您也可能需要在此处width: 100%
将overflow: hidden;应用于“.pricing-features-item”

这取决于你的任务。希望这可以帮助！干杯！

列表列不会按下边框？

4 个答案: