why css width property is changing with display:inline property? - html

Question

i have piece of code which contain an <ul> element and the <ul> element have a css property display:block by default.here is the code snippet,
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>
but when i added display:inline to the tag to remove it's default display:block property , then the width property of grand-child-1,grand-child-2 is changed.i added the snippet below.how to fix this problem?.thanks is advance.
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

Make the li display: inline (or display: inline-block) but NOT the ul. Like this:
li {
list-style-type:none;
padding:0;
display:inline; /* or inline block */
}
The entire code:
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>