div元素内的全宽？

Question

div内的父div内的100％宽度list元素似乎不起作用。

＆＃13;

＆＃13;

.parent { 
   position : relative;
   width  : 200px;
   height : 200px;
   background-color : #888888;
}

.child {
   width : 100%;
   height : 40px;
   background-color : #555555;
   margin : 1px 0 0 0;
}
li {
 list-style-type : none;
}

＆＃13;

<div class="parent">
   <ul>
      <li><div class="child"></div></li>
      <li><div class="child"></div></li>
   </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这可能是因为默认情况下<li>有display: inline。

您可以尝试将其更改为display: inline-block或display: block，具体取决于您的需求。

Answer 2

您必须从ul元素中删除默认填充：

ul {
padding: 0;
}

Answer 3

将ulding的padding-left设置为0。浏览器制造商为某些元素添加了一些默认样式，例如下划线到＆＃34; a＆＃34;标签。您可以使用 CSS重置删除这些样式。有关详细信息read this article.

＆＃13;

＆＃13;

.parent { 
   position : relative;
   width  : 200px;
   height : 200px;
   background-color : #888888;
}

.parent ul { padding-left: 0; }

.child {
   width : 100%;
   height : 40px;
   background-color : #555555;
   margin : 1px 0 0 0;
}
li {
 list-style-type : none;
}

＆＃13;

<div class="parent">
   <ul>
      <li><div class="child"></div></li>
      <li><div class="child"></div></li>
   </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

删除padding的默认ul将获得所需的结果。

添加

ul{
  padding: 0;
}

到 CSS 。

.parent { 
   position : relative;
   width  : 200px;
   height : 200px;
   background-color : #888888;
}

.child {
   width : 100%;
   height : 40px;
   background-color : #555555;
   margin : 1px 0 0 0;
}
li {
 list-style-type : none;
}

ul{
  padding: 0;
}

<div class="parent">
   <ul>
  <li><div class="child"></div></li>
  <li><div class="child"></div></li>
   </ul>
</div>

Answer 5

使用浏览器＆＃34;检查＆＃34;功能，以查看导致li元素的宽度小于预期的原因。执行此操作后，ul元素的宽度似乎为81px。这导致li元素比预期的要窄。

重新格式化html或进行CSS更改以更正此问题。