适用于手机的手风琴菜单的CSS

Question

我正在尝试为移动网站获取手风琴菜单.它看起来如下.

下面是我用于菜单的css.

.accordion-anchor {
    float: left;
    width: 50%;
    padding: 0.8em;
    border-left: 1px solid #258ecd;
    color: white;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
    border-bottom: 1px solid #808080;
    background: black;
}

<a href="" ng-click="elementClicked($event)" id="Rough_Plumbing__Electrical_PS" class="accordion-anchor ng-binding"><input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Rough Plumbing &amp; Electrical</a>

正如您所看到的那样,当文本未在两侧对齐时,它们会被破坏.我尝试了文本的自动换行,它似乎没有解决这个问题.

根据建议更改css之后,这就是现在的样子.

Answer 1

您的代码的问题在于您的浮点元素具有不均匀的高度,因此每行将采用其任何coloumn的最大高度,因此下一行将始终显示在一些空格之后.了解有关该问题的更多信息阅读此答案

所以为了解决你的问题,我假设你总是需要2个颜色,所以我们将屏幕划分为两个垂直空间然后在每个垂直空间中平均分配这些复选框

您可以查看此演示链接

代码片段

.menu {
  display: inline-block;
  width: 100%;
  background: #000;
}
.pull-left {
  float: left;
  width: 50%;
}
.accordion-anchor {
  border-left: 1px solid #258ecd;
  color: white;
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  display: block;
  padding: 0 15px;
  padding-left: 20px;
  transition: all 0.15s;
  border-bottom: 1px solid #808080;
  background: black;
}
.accordion-anchor .accordion-checkbox {
  position: absolute;
  margin-left: -15px;
}

<div class='menu'>
  <div class='pull-left'>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Milkwork</a>

    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Outdoor power equipment</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Rough Plumbing &amp; Electrical</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Paint HomeFashions,Storage &amp; Cleaning</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Seasonal Living</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Lumber and Building Materials</a>
  </div>
  <div class='pull-left'>

    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Fashion Fixtures</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Tools and Hardware</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Flooring</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Kitchens and Applicaes</a>
    <a href="" ng-click="elementClicked($event)" class="accordion-anchor ng-binding">

      <input type="checkbox" ng-click="elementClicked($event)" class="accordion-checkbox ng-pristine ng-untouched ng-valid" id="CREATE_CC_LAYER" ng-model="ischecked">Lawn &amp; Garden</a>


  </div>
</div>