适用于手机的手风琴菜单的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

你的代码的问题在于你的浮动元素的高度不均匀，因此每一行都将占据任何颜色的最大高度，因此下一行将始终出现在一些空格之后。要了解有关该问题的更多信息Read this answer

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

您可以查看Demo Link

代码段

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;