CSS for the accordion menu for mobile devices

Question

I am trying to get an accordion menu for a mobile site. His is as follows.

Below is the css that I use for the menu.

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

Run codeHide result

As you can see with borders, they break when the text does not align on both sides. I tried an automatic wrapper for text, and it didn't seem to fix it.

After changing css, according to the sentence, it looks like it is now.

Answer 1

, - un even height , , coloumn, .

, , , 2 coloumns,

-

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

Hide result