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

将宽度：100％添加到UL元素

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

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

间距<li>元素的数量过多的问题

2 个答案: