Question

＆＃13;

#div {
  width: 200px;
}
#p1 {
  width: 0.5em;
}
#p2 {
  width: 0.2em;
}

＆＃13;

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

＆＃13;

我想使用em将p1设置为div的50％，将p2设置为div的20％，但它似乎没有任何改变。我该怎么做才能做到这一点？感谢。

Answer 1

如果要将段落设置为父级的百分比，则应在css中使用百分比。 Em是相对于字体大小的长度单位，而不是它的父宽度或高度。 http://www.w3schools.com/cssref/css_units.asp

如果您还希望段落显示在彼此旁边，请添加“display：inline-block;”

#div {
  width: 200px;
  background: silver;
}
#p1 {
  display: inline-block;
  width: 50%;
  background: green;
}
#p2 {
  display: inline-block;
  width: 20%;
  background: red;
   }

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

Answer 2

em单位是相对于元素的字体大小。因此，您设置0.5em的宽度将是父级字体大小的一半。如果未设置，默认值为16px。如果DIV font-size设置为20px，则其子P设置宽度：0.5em表示10px宽度。在您的示例中也是如此，P1设置为8px宽度，因为它采用容器的16px默认字体大小。

因此，如果您希望孩子根据父容器调整自己的大小，请尝试使用％unit。

Answer 3

基于16px浏览器默认尺寸的转化

您需要提供#div { width: 1em; } #p1 { width: 50%; background-color : red } #p2 { width: 0.2em; }，以便您的子元素可以相应地具有宽度。尝试将50％更改为0.5em，如下所示，它将给出相同的结果

#div {
      width: 1em;
    }
    #p1 {
      width: 0.5em;
      background-color : red
    }
    #p2 {
      width: 0.2em;
    }

或

"UPDATE $db1 SET count='$t1c', WHERE number='$input2'"

如需了解更多信息，请查看PXtoEM

希望它会有所帮助!!

Answer 4

＆＃13;

#div {
  vm: 1%;
  border:1px solid #000;
  display:block;
}
#p1 {
  width: 50%;
  display:inline-block;
  border:1px solid red;
  margin-left:10px;
}
#p2 {
  width: 20%;
  display:inline-block;
   border:1px solid red;
}

＆＃13;

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

＆＃13;

Answer 5

您需要添加display:inline-block;

＆＃13;

#div {
  width: 200px;
}
#p1 {
  width: 0.5em;
  display:inline-block;
}
#p2 {
  width: 0.2em;
  display:inline-block;
}

＆＃13;

<body>
  <div id="div">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>
</body>

＆＃13;

Answer 6

P不是容器，必须没有宽度样式（对于这个作业使用div，因为div是容器）所以它必须像这样工作：

#div {
  width: 200px;
}
#p1 {
  width: 1.5em;
  border:1px solid blue;
}
#p2 {
  width: 1em;
  border:1px solid red;
}

<body>
  <div id="div">
    <div id="p1">
      <p>p1 - lorem ipsum dolor sit amet</p>
    </div>
    <div id="p2">
      <p>p2 - lorem ipsum dolor sit amet</p>
    </div>
  </div>
</body>

请注意，如果您将容器宽度设置为p大小，它将会溢出（因为它是元素，亲爱的Whatson）。

div中的段落不起作用

6 个答案: