尝试使用媒体查询制作元素显示块答案

【问题标题】：Trying make element display block with media query尝试使用媒体查询制作元素显示块
【发布时间】：2018-01-07 11:31:33
【问题描述】：

这里是 div 中的一个元素。我使用媒体查询使它们居中并以全宽内联，我的意思是最小宽度 701 像素，并使它们在 700 像素下被阻止显示。居中工作，但它没有显示在块显示中，而是显示在一行中。但我写道： display: block !important;在 .kdown 演示中：http://buhehe.de/kalender-2018/ 我的意思是日历下的下载按钮 html:

<div class="kdown" id="kdown">  
  <h6> Kalender 2018 Ausdrucken , Download als PDF, Word, Excel oder PNG:</h6>
  <a target="_blank" class="pngg" href="http://buhehe.de/wp-content/kalender-2018.png">
      <img src="http://buhehe.de/wp-content/uploads/2018/01/png-img.png" alt="PNG" />
      <span>Download in PNG</span>
  </a>
  <a class="pdff" target="_blank" href="http://buhehe.de/wp-content/kalender-2018.pdf"> 
      <img src="http://buhehe.de/wp-content/uploads/2018/01/pdf-img.png" alt="PDF" />
      <span>Download in PDF</span> 
  </a>
  <a target="_blank" class="wordd" href="http://buhehe.de/wp-content/kalender-2018.docx">
      <img src="http://buhehe.de/wp-content/uploads/2018/01/word-img.png" alt="Word" />
      <span>Download in Word</span>
  </a>
  <a target="_blank" class="excell" href="http://buhehe.de/wp-content/kalender-2018.xlsx"> 
      <img src="http://buhehe.de/wp-content/uploads/2018/01/Excel-img.png" alt="Excel" />
      <span>Download in Excell</span>
  </a> 
</div>

css:

@media screen and (max-width: 700px) {
     .traki {
        margin-left: 0px !important;
         text-align: center !important;
    }
     .kdown p span {
        position: relative;
         top: -1px !important;
    }
     .kdown h6 {
         font-size: 15px !important;
    }
     .kdown p {
         display: block !important;
    }
}
 @media screen and (min-width: 701px) {
     .kdown p {
         display: inline !important;
    }
     .kdown {
         text-align: center !important;
    }
}
.kdown a {
     width: 160px;
     background-color: #FF9900;
     color: #FFFFFF;
     border-radius: 4px !important;
     height:40px;
     padding: 10px 3px 10px 5px ;
}
 .kdown a:not(:first-child) {
    margin-left: 3px;
}
 .kdown a:hover {
     opacity: 0.8;
     color: #ffffff !important;
}
 .kdown p img {
     width: 25px;
     padding-right: 3px;
     height: 25px;
     position: relative;
     top: 7px;
}

【问题讨论】：

标签： html css

【解决方案1】：

为了使按钮居中，您需要这样的东西：

@media screen and (max-width: 700px) {
    .kdown > p > a {
    display: block;
    margin: 0 auto;
    }
}

在块元素中使用自动边距使其居中。

【讨论】：

这就是我的解决方案所做的。 ">" 是一个子选择器。所以你所有的“a”标签都将被阻止并居中在 700 以下。如果我误解了什么，请告诉我。
没有你理解得很好但是检查页面，我用你的代码更新了。只有第一个元素居中。
你能摆脱这种风格吗？ .kdown a:not(:first-child){ margin-left: 3px}?如果没有，您将不得不使用更高优先级的选择器覆盖我的样式。

【解决方案2】：

有些奇怪，您声明的 HTML 与网页中的不匹配。在那里检查会给出一个运行已弃用的“字体”标签的总意大利面条，按钮与其内容之间没有关系......尝试设置正确的 CSS 会很神奇。

尝试使用更符合逻辑的布局。比如：

buttons-container
  button
     a
        img
        text
  button
     a
        img
        text
  button
     a
        img
        text

然后您可以将容器设置为显示 flex，根据需要设置按钮样式，将 A 设置为 100% 和高度，以便它们在整个按钮上工作，并根据需要设置文本和 img 样式。

这是little fiddle to get you started，您可以从那里工作；）也许你只需要从行到列切换 flex-direction 并调整 flex 属性；）

【讨论】：