菜單在頁面末尾，但從上到下鏈接

Question

我該如何做到這一點？ 這是一個wordpress菜單。

pic

好了，到目前爲止，我有這樣的：

ul{ 
    display: flex; 

li{ 
    width: 100%; 

    a{ 
    position: absolute; 
    bottom: 0; 
    top: 0; 
    width: 2%; 

    span{ 
     display: block; 
     position:absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     -webkit-transform: translateY(-50%); 
     -moz-transform: translateY(-50%); 
     }; 
    }; 
    }; 
}; 

和它的作品，但現在我需要某種JavaScript代碼，這樣的跨度內的標題將居中，每元素將從左側和右側具有相同的空間量。

pic2

得到它完成，與添加左：％;到每個菜單項元素。

感謝您的幫助！

Answer 1

製造這樣的： 小提琴：https://jsfiddle.net/uq3vLvpb/

的HTML：

<ul> 

     <li><a><span>one</span></a></li> 

     <li><a><span>two</span></a></li> 

     <li><a><span>three</span></a></li> 

     <li><a><span>four</span></a></li> 

     <li><a><span>five</span></a></li> 

     <li><a><span>six</span></a></li> 

     <li><a><span>seven</span></a></li> 

     <li><a><span>eight</span></a></li> 

    </ul> 

的CSS：

ul { 
    li { 
     width: 100%; 
     a { 
     position: absolute; 
     bottom: 0; 
     top: 0; 
     width: 10.5%; 
     font-family: 'Lora', serif; 
     font-size: 26px; 
     font-weight: 400; 
     text-align: center; 
     color: #ffffff; 
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
     text-decoration: none; 
     padding: 0 15px; 
     cursor: pointer; 
     span { 
      display: block; 
      position: absolute; 
      top: 65%; 
      left: 50%; 
      transform: translate(-50%, -35%); 
      -webkit-transform: translate(-50%, -35%); 
      -moz-transform: translate(-50%, -35%); 
     } 
     &:hover { 
      background-color: rgba(0, 0, 0, 0.4); 
     } 
     } 
    } 

    li:first-child { 
     a { 
     left: 9.5%; 
     } 
    } 

    li:nth-child(2) { 
     a { 
     left: 19.5%; 
     } 
    } 
    li:nth-child(3) { 
     a { 
     left: 29.6%; 
     } 
    } 
    li:nth-child(4) { 
     a { 
     left: 39.6%; 
     } 
    } 
    li:nth-child(5) { 
     a { 
     left: 49.7%; 
     } 
    } 
    li:nth-child(6) { 
     a { 
     left: 59.8%; 
     } 
    } 
    li:nth-child(7) { 
     a { 
     left: 69.9%; 
     } 
    } 
    li:nth-child(8) { 
     a { 
     left: 80%; 
     } 
    } 
    }