无法将显示为表格单元格的 <li> 元素更改为块元素并更改其宽度答案

【问题标题】：can't change <li> elements displayed as a table-cell to a block element and change it's width无法将显示为表格单元格的 <li> 元素更改为块元素并更改其宽度
【发布时间】：2015-09-22 20:31:11
【问题描述】：

我有一个宽度为 100% 的<ul>，其作用类似于表格，内部有两个 <li> 元素，其中包含一个背景图像，它们都充当表格单元格，每个 <li> 的宽度为50%。我想将<li> 更改为在媒体查询断点处显示为块元素，并改为以 100% 的宽度显示。这行不通。这是HTML：

 <section id="features">

<h1>The Functionality</h1>

<ul class="main-links">

<li style="background-image: url(img/test2.jpg);"><div>Some text</div></li>

<li style="background-image: url(img/test1.jpg);"><div>more text and even more text</div></li>

</ul>


</section>

这是css（我使用的是SASS）：

#main #features {
  background-color: #fff;
  overflow: hidden;
}

#main #features ul {
  display: table;
  width: 100%;
}

#main #features ul li {
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-position: center top;
  height: 350px;
  list-style: none;
  display: table-cell;
  width: 50%;
}

最后是媒体查询：

@media screen and (min-width: 760px) and (max-width: 980px) {

  #features .main-links {
    width: 100%;
    border: solid 2px red;
  }

  #features li {
    border: solid 2px lime;
    width: 100%;
    display: block;
  }


  .contact-info {
    display: none;
  }
}

唯一被覆盖的是边框......我错过了什么？感谢帮助

【问题讨论】：

您还需要将ul 从display:table 重置回block。并且还要注意特异性。在您的媒体查询中使用相同的选择器。
@Abhitalks 这可能应该是一个答案，而不是评论。
尝试将其显示更改为阻止并在必要时使用 !important。希望有所帮助
添加 !important 确实使其成为块元素，但它不会将宽度更改为 100%。这是我无法解决的最大问题。
好的，我添加了 !important 到宽度，这解决了我的问题。但是使用 !important 感觉不对。

标签： html css media-queries

【解决方案1】：

在 CSS 中，媒体查询继承所有以前应用于元素的样式，然后覆盖指定的样式。因此，您需要指定需要更改的每种样式。否则display: table 将被自动继承用于媒体查询。

@media screen and (min-width: 760px) and (max-width: 980px) {

  #features .main-links {
    width: 100%;
    border: solid 2px red;
  }

  #features li {
    border: solid 2px lime;
    width: 100%;
    display: block;
  }


  .contact-info {
    display: none;
  }
#main #features ul {
   display: block;
}
}

【讨论】：

【解决方案2】：

我稍微改变了你的 CSS 样式。

对于 UL，我将填充隐藏为 0。

你在@media 标签中犯了一个错误。 “#features li”必须是“#features ul li”

这里有一个 jsfiddle 作为例子，它现在可以工作：http://jsfiddle.net/3yzersdr/

    #features {
  background-color: #fff;
  overflow: hidden;
}

#features ul {
  display: table;
  width: 100%;
  padding: 0;
}

#features ul li {
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-position: center top;
  height: 350px;
  list-style: none;
  display: table-cell;
  width: 50%;
}


@media screen and (min-width: 760px) and (max-width: 980px) {


  #features .main-links {
    width: 100%;
    border: solid 2px red;
  }

  #features ul li {
    border: solid 2px lime;
    width: 100%;
    display: block;
  }


  .contact-info {
    display: none;
  }
}

【讨论】：