css - 使用媒体查询删除 li 上的缩进

标签 css media-queries

当屏幕尺寸为 500 宽度时,我正在使用媒体查询删除 li 上的缩进 html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row" style="margin-left: 2px; margin-right: 1px;">
            <div class="media">
                <div class="date pull-left">
                    <p>7<span>June</span></p>
                </div>
                <div class="media-body">
                    <p><strong>xxx</strong> xxxx/p>
                    <p>Key Points:</p>
                    <ol>
                        <li>xxx</li>
                        <li>xxx</li>
                        <li>xxxx.</li>
                        <li>sda</li>
                        <li>dasdaS</li>
                        <li>ASdaSDa</li>
                        <li>aSDas.</li>
                    </ol>
                    <a href="xxx"><img src="/static/images/YouTube-icon-full_color.gif"></a>
                    </div>
            </div>
        </div>
</body>
</html>

和对应的css:

@media (min-width: 600px){
 ul{
      margin: 0px;
      padding: 0px;
   }
 li{
      margin: 0px;
      padding: 0px;
   }
}

链接到 JS bin 粘贴 http://jsbin.com/xoqufugo/9/

我的问题是它不起作用。

最佳答案

您需要进行以下更改。这是 demo

min-width: 600px 更改为 max-width: 600px

0lol

关于css - 使用媒体查询删除 li 上的缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24319669/

相关文章:

html - 使用位置 :absolute (or best alternative)? 后是否有可能取消文档流

html - 定位 div 元素

隐藏和显示页面元素的 CSS 媒体查询。

html - 如何找到缩放轮播图像的大小

jquery - 为表内嵌创建新的可创建行

html - 如何删除这两个 DIV 之间不需要的空间?

css - React 模态和媒体查询

css - 使用媒体查询景观

html - iPad 2 不遵守电子邮件的媒体查询

html - 使用 css 将输入字段居中