CSS for accordion menu for mobile

Question

I am trying to get a accordion menu for a mobile site. Its looks like the following .

Below is the css which I am using the 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>

As you can see with the borders they are broken when the text is not aligned on both the sides. I tried the auto wrap for text and it didnt seem to fix this.

After changing the css as per the suggestion this is how it looks like now.

Answer 1

The problem with your code is that your float elements have un even height and hence each row will take the maximum height of its any coloumn so the next row will always appear after some space. To know more about the issue Read this answer

So to solve your problem i am assuming that you always need 2 coloumns so we will divide the screen into two vertical space and then equally distribute these checkboxes in each of the vertical spaces

You can check this Demo Link

code Snippet

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