为什么不设置水平列表项的宽度？

Question

我正在尝试将其中一个列表项的宽度设置为50％。水平列表应为100％宽度。 JSFiddle

HTML

<ul>
     <li id="item1">hello</li>
     <li id="item2">world</li>
</ul>

CSS

ul {
  list-style-type: none;
  width: 100%;
  padding: none;
}

ul li {
  display: inline;
}

#item1 {
  width: 50%;
}

Answer 1

提供display: inline-block;代替display: inline;

ul li {
    display: inline-block;
}

<强> Working Fiddle

检查不同的显示属性here

Answer 2

li显示应为inline-block

ul li {
    display: inline-block;
}

Answer 3

显示inline-block

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  width: 100%;
  padding: none;
}

ul li {
  display: inline-block;
}

#item1 {
  width: 50%;
}

＆＃13;

<ul>
<li id="item1">hello</li>
<li id="item2">world</li>
</ul>

＆＃13;

＆＃13;

＆＃13;