为什么 css 宽度 属性 随 display:inline 属性 而变化？

Question

我有一段代码包含一个 <ul> 元素和 <ul> 元素有一个 css 属性 display:block by default.here 是代码片段，

ul,li{
list-style-type:none;
padding:0;
/*display:inline;*/
}
#parent{
  width:100%;
  /*height:50px;*/
  background-color:red;
  }
  
  #child{
    width:50%;
    height:100%;
    background-color:yellow;
    }
    
#grand-child-1,#grand-child-2 {
  width:30%;
  height:100%;
  float:left;
}
#grand-child-2{
  background-color:green;
}
#grand-child-1{
  background-color:blue;
}

<div id="parent">
   <ul id="child">
     <li id="grand-child-1">title 1</li>
     <li id="grand-child-2">title-2</li>
     <li id="grand-child-3">title-3</li>
    </ul>
</div>

但是当我将 display:inline 添加到标签以删除它的默认值 display:block 属性 时，grand-child-1,grand-child 的宽度 属性 -2 changed.i 添加了代码片段 below.how 来解决这个问题？谢谢提前。

ul,li{
list-style-type:none;
padding:0;
display:inline;
}
#parent{
  width:100%;
  /*height:50px;*/
  background-color:red;
  }
  
  #child{
    width:50%;
    height:100%;
    background-color:yellow;
    }
    
#grand-child-1,#grand-child-2 {
  width:30%;
  height:100%;
  float:left;
}
#grand-child-2{
  background-color:green;
}
#grand-child-1{
  background-color:blue;
}

<div id="parent">
   <ul id="child">
     <li id="grand-child-1">title 1</li>
     <li id="grand-child-2">title-2</li>
     <li id="grand-child-3">title-3</li>
    </ul>
</div>

Answer 1

将 li 设为 display: inline（或 display: inline-block），但 而非 ul。像这样：

li {
  list-style-type:none;
  padding:0;
  display:inline; /* or inline block */
}

完整代码：

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  padding: 0;
  display: inline;
}

#parent {
  width: 100%;
  /*height:50px;*/
  background-color: red;
}

#child {
  width: 50%;
  height: 100%;
  background-color: yellow;
}

#grand-child-1,
#grand-child-2 {
  width: 30%;
  height: 100%;
  float: left;
}

#grand-child-2 {
  background-color: green;
}

#grand-child-1 {
  background-color: blue;
}

<div id="parent">
  <ul id="child">
    <li id="grand-child-1">title 1</li>
    <li id="grand-child-2">title-2</li>
    <li id="grand-child-3">title-3</li>
  </ul>
</div>