フッター要素は左分割し、右

Question

私はフッターのこのコードを持っている：

<ul> 
    <ul class="footer"> 
     <li><a href="/contact">Contact</a></li> 
     <li><a href="/about">About</a></li> 
     <li><a href="/help">Help</a></li> 
      <ul class="right"> 
       <li><a href="/newsletter">Newsletter</a></li> 
       <li><a href="/signin">Sign In</a></li> 
       <li><a href="/terms">Terms</a></li> 
      </ul> 
    </ul> 
</ul> 

CSS：それは一番下のコードを表示し、途中でそれらを分割

ul { 
    list-style-type: none; 
    padding: 0; 
    overflow: hidden; 
    bottom: 0; 
} 

li { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
} 

.right li{ 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

li a { 
    font-family: Helvetica; 
    display: block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

。しかし、彼らはすべてコーナーでグループ化されています。これのための修正はありますか？ （SCREENSHOT）

Answer 1

コードを整理して、このレイアウトで少し改良しました。 最大の問題は、あなたが "LI"の "ポジション：固定"を持っていたことでした。あなたはそれらを囲むラッパーを "position：fixed"にしたいと思っています。 私は一番下にjsfiddleデモリンクを含めました。

.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
ul.left li { 
 
    float: left; 
 
    display: inline; 
 
} 
 
ul.right li { 
 
    float: right; 
 
    display: inline; 
 
} 
 
li a { 
 
    font-family: Helvetica; 
 
    display: inline-block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
}

<div class="footer"> 
 
    <ul class="left"> 
 
    <li><a href="/contact">Contact</a> 
 
    </li> 
 
    <li><a href="/about">About</a> 
 
    </li> 
 
    <li><a href="/help">Help</a> 
 
    </li> 
 
    </ul> 
 
    <ul class="right"> 
 
    <li><a href="/newsletter">Newsletter</a> 
 
    </li> 
 
    <li><a href="/signin">Sign In</a> 
 
    </li> 
 
    <li><a href="/terms">Terms</a> 
 
    </li> 
 
    </ul> 
 
</div>

デモ： https://jsfiddle.net/NYCguyJason/3ogsjs4t/1/