浇<li>注空间元素的问题

Question

我不能在左边填充时用倒注分隔页脚的这些 li 元素......否则，我使用的内联块不再起作用了......

我已经尝试使用 %，但随后它停止内联...

你可以帮我吗？

footer {
  position: fixed;
  bottom: 0px;
  left: 0;
  height: 65px;
  width: 100%;
  margin: auto;
  z-index: 99;
}
.footer ul {
  position: absolute;
  display: block;
  text-align: right;
  list-style-type: none;
  bottom: 15px;
  right: 5%;
}
.footer li {
  display: inline-block;
  position: relative;
  padding-left: 50px;
}

<footer>
  <div class="footer">
    <ul>
      <li>
        <div id="humidity">15%</div>
      </li>
      <li>
        <div id="temp">15°C</div>
      </li>
      <li>
        <div id="clock">15h15m15s</div>
      </li>
      <li>
        <div id="date" class="date">15.15.15</div>
      </li>
    </ul>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1670 97" preserveAspectRatio="none">
<g>
	<path fill="#FE4A11" d="M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
		c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
	<path fill="#FE4A11" d="M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
		c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
</g>
</svg>
  </div>
</footer>

Answer 1

在 UL 元素中添加宽度：100%

footer {
  position:fixed;
  bottom:0px;
  left:0;
  height: 65px;
  width: 100%;
  margin: auto;  
  z-index:99;
}
.footer ul{
    position:absolute;    
    display:block;
    text-align:right;
    list-style-type: none;
    bottom:15px;
    right: 5%;
    width:100%;
    }
.footer li {
   display: inline-block;  
    
    padding-left: 5%;
}

<footer>
<div class="footer">
<ul>
    <li><div id="humidity">15%</div></li>
    <li><div id="temp">15°C</div></li>
    <li><div id="clock">15h15m15s</div></li>
    <li><div id="date" class="date">15.15.15</div></li>
  </ul>
    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1670 97" preserveAspectRatio="none">
<g>
    <path fill="#FE4A11" d="M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
        c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
    <path fill="#FE4A11" d="M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
        c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
</g>
</svg>
</div>
</footer>

Answer 2

您必须ul元素上设置width: 100%;。
我为你想要实现的目标创建了一支笔：
代码笔