同一个li里图片div（占20%）和文字div（占80%）左右排列

你可以使用CSS的flexbox布局来实现li元素中的图片div和文字div左右排列，并且让图片div占据20%的宽度，文字div占据80%的宽度。具体实现方法如下：

HTML代码：

<ul>
  <li>
    <div class="image">
      <img src="your-image-url" alt="your-image-description">
    </div>
    <div class="text">
      <p>Your text goes here.</p>
    </div>
  </li>
</ul>

CSS代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.image {
  flex: 1;
  width: 20%;
}

.text {
  flex: 4;
  width: 80%;
}

上述代码中，我们首先将ul元素的样式设置为list-style:none，padding:0和margin:0，这样可以去掉li元素默认的样式。然后，我们将li元素的display属性设置为flex，将flex-direction属性设置为row，这样图片div和文字div就可以左右排列了。接着，我们使用align-items属性将图片div和文字div垂直居中对齐。然后，我们使用flex属性将图片div和文字div按照1:4的比例分配宽度，实现占据20%和80%的效果。最后，我们使用width属性来设置图片div和文字div的具体宽度。