垂直侧菜单中的左对齐列表项答案

【问题标题】：Left-align list items in a vertical side menu垂直侧菜单中的左对齐列表项
【发布时间】：2015-08-25 19:34:24
【问题描述】：

我正在使用滑出式 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>

【问题讨论】：

标签： css menu

【解决方案1】：

<ul>

有一个默认的 padding-left 值，您尚未设置为 0。因此，您的

<li>

被推到右边。此外，你的 10px 左边框增加了另外 10px 的宽度，给你的

<li>

宽度为 210 像素。

尝试设置宽度

<li>

到 190px 和设置

padding-left: 0

在你的

<ul>

【讨论】：

【解决方案2】：

只需将#navigation 中的padding-left 设置为0。

【讨论】：

【解决方案3】：

只需将 padding-left:0px 添加到#navigation。

#navigation {
   padding-left: 0px;
 }

【讨论】：