Элементы списка слева выравнивания в вертикальном боковом меню

Question

Я использую плагин jQuery (https://github.com/mango/slideout), чтобы создать вертикальное боковое меню, которое скрыто до нажатия кнопки меню. Я хочу, чтобы каждый элемент списка занимал всю длину зеленого контейнера, но когда я устанавливаю ширину элемента li на 100%, элементы li выталкиваются из зеленой зоны. Есть ли способ выровнять их слева без ручной установки левого поля? Я попробовал text-align: left, но это не сработало.

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.slideout-menu { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    z-index: 0; 
 
    width: 256px; 
 
    overflow-y: auto; 
 
    margin-top: 60px; 
 
    -webkit-overflow-scrolling: touch; 
 
    display: none; 
 
    background-color: red; 
 
} 
 
.slideout-panel { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.slideout-open, 
 
.slideout-open body, 
 
.slideout-open .slideout-panel { 
 
    overflow: hidden; 
 
} 
 
.slideout-open .slideout-menu { 
 
    display: block; 
 
} 
 
#navigation { 
 
    text-align: left; 
 
    background-color: green; 
 
    width: 200px; 
 
    margin-left: 10px; 
 
    padding-top: 12px; 
 
    padding-bottom: 1px; 
 
} 
 
li { 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    display: block; 
 
    background: #fff; 
 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
 
    margin-bottom: 14px; 
 
    border-left: 10px solid #000; 
 
    transition: all 300ms ease-in-out; 
 
    /*margin-left:-25px;*/ 
 
}

<nav id="menu"> 
 
    <ul id="navigation"> 
 
    <li> 
 
     <input placeholder="Search" type="search" class="gn-search"><a href="#"><span class="icon icon-search">Search</span></a> 
 
    </li> 
 
    <li><a href="#about"><span class="icon icon-lucky">I'm Feeling Lucky</span></a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

<ul> 

имеет отступ левого значение по умолчанию, которое не установлен в 0. В результате, ваш

<li> 

являются с толку направо. Кроме того, ваш 10px левой границы добавляет другой 10px ширины, давая вашему

<li> 

ширину 210px.

Попробуйте установить ширину

<li> 

в 190px и установка

padding-left: 0 

на вашем

<ul> 

Answer 2

Просто установите padding-left в #navigation 0.

Answer 3

Просто добавьте padding-left: 0px в #navigation.

#navigation { 
    padding-left: 0px; 
}