Question

我正在尝试使用方法display:inline-block和float:left来制作全角水平菜单。除媒体查询未应用width:100%声明外，所有其他方法均有效。尽管会显示测试颜色，但这表明媒体查询正在运行。

HTML文档的相关部分

<nav class="display">
  <!-- Weird comments to prevent space between elements -->
  <div class="navitem">Section 1</div><!--
  --><div class="navitem">Section 2</div><!--
  --><div class="navitem">Section 3</div><!--
  --><div class="navitem">Section 4</div>
</nav>

<nav class="float">
  <div class="navitem">Section 1</div>
  <div class="navitem">Section 2</div>
  <div class="navitem">Section 3</div>
  <div class="navitem">Section 4</div>
</nav>

样式表中的相关部分

.display .navitem {
  display: inline-block;
  width: 25%;
}

.float .navitem {
  float: left;
  width: 25%;
}

.float::after {
  clear: left;
  content: "";
  display: table;
}

@media screen and (max-width:800px) {
  .navitem {
    width: 100%;
    color: blue;
  }
}

我已经尝试了一个小时，但无法弄清楚为什么宽度不会改变。我想念什么？

完整代码：jsfiddle.net

Answer 1

您可以使用display：flex

html

private static final Body B = null;

public static void main(String[] args) {
    // TODO Auto-generated method stub
    final String apppath = "c:\\Users\\SHTAV3\\Desktop\\Myclass.jar";
    soot.G.reset();
    Options.v().set_process_dir(Collections.singletonList(apppath));
    Options.v().set_allow_phantom_refs(true);
    Options.v().set_prepend_classpath(true);
    Options.v().set_validate(true);
    Options.v().set_whole_program(true);
    Options.v().set_app(true);
    Options.v().set_src_prec(Options.src_prec_class);
    Scene.v().loadNecessaryClasses();
    SootClass appclass = Scene.v().loadClassAndSupport("Myclass");

    appclass.setApplicationClass();
    SootMethod m = appclass.getMethodByName("printOne");

    ExceptionalUnitGraph g = new ExceptionalUnitGraph(B); 
    Body B = m.retrieveActiveBody(); 
    VeryBusyExpressions an = new VeryBusyExpressions();
    Iterator i = g.iterator(); 
    while (i.hasNext()) {
        Unit u = (Unit)i.next(); 
        List IN = an.getBusyExpressionsBefore(u); 
        List OUT = an.getBusyExpressionsAfter(u); 
    }

    PackManager.v().runPacks();
    CallGraph cg = Scene.v().getCallGraph();
    System.out.println(cg.toString());


}

css

  <nav>
    <div>Section 1</div>
    <div>Section 2</div>
    <div>Section 3</div>
    <div>Section 4</div>
  </nav>

https://jsfiddle.net/z7w2ms34/

Answer 2

您应该使用移动优先的方法来设置媒体查询。另外，请确保未将.navitem的{{1}}属性设置为display，否则您将无法对其应用宽度。

inline

div的宽度不适用于媒体查询

2 个答案: