Question

我的代码段包含<ul>元素和<ul＆gt;默认情况下，element有一个css属性display:block。这是代码片段，

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

但是当我向标记添加display:inline以删除它的默认display:block属性时，则更改了grand-child-1，grand-child-2的width属性。在下面添加了片段，以解决这个问题吗？谢谢你提前。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

制作li display: inline（或display: inline-block）但不 ul。像这样：

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

整个代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

为什么css width属性正在改变display：inline属性？

1 个答案: