Question

我正在使用slideout 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>

有一个默认的padding-left值，你没有设置为0.结果，你的

<li>

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

<li>

宽度为210px。

尝试设置

的宽度

<li>

到190px并设置

padding-left: 0

在你的

上

<ul>

Answer 2

只需将padding-left的{{1}}设置为0。

Answer 3

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

#navigation {
   padding-left: 0px;
 }

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

3 个答案: