css border-top issue,cant added to one line

Question

  Im added   `li { border-top:1px solid #80bee3;}` 

 .days li {
list-style-type: none;
display: inline-block;
width: 13.6%;border-top:1px solid #80bee3;
text-align: center;
margin-bottom: 8px;
font-size:12px;
color: #777;

}

but this border displayed

1 2 3 4 5 6 7 8

----- ---- ---- ---- ---- ---- ---- ---- its is separate line not only one border, How to take that only one border (look my attached image )

How to fix that issue, Thanks

 <ion-list>
          <ul class="days list">
            <li><ion-item>1</ion-item></li>
            <li><ion-item>2 <div class="book-risk"></div></ion-item></li>
            <li><ion-item>3</ion-item></li>
            <li><ion-item>4</ion-item></li>
            <li><ion-item>5<div class="book-risk"></div></ion-item></li>
            <li><ion-item>6</ion-item></li>
            <li><ion-item>7</ion-item></li>
            <li><ion-item>8</ion-item></li>
            <li><ion-item>9</ion-item></li>
            <li><ion-item><div class="active">1</div>10</ion-item></li>
            <li><ion-item>11</ion-item></li>
            <li><ion-item>12</ion-item></li>
            <li><ion-item>13<div class="book-event"></div></ion-item></li>
            <li><ion-item>14</ion-item></li>
            <li><ion-item>15</ion-item></li>
            <li><ion-item>16</ion-item></li>
            <li><ion-item>17</ion-item></li>
            <li><ion-item>18</ion-item></li>
            <li><ion-item>19</ion-item></li>
            <li><ion-item>20</ion-item></li>
            <li><ion-item>21</ion-item></li>
            <li><ion-item>22</ion-item></li>
            <li><ion-item>23</ion-item></li>
            <li><ion-item>24</ion-item></li>
            <li><ion-item>25</ion-item></li>
            <li><ion-item>26</ion-item></li>
            <li><ion-item>27</ion-item></li>
            <li><ion-item>28</ion-item></li>
            <li><ion-item>29</ion-item></li>
            <li><ion-item>30</ion-item></li>
            <li><ion-item>31</ion-item></li>
          </ul>


        </ion-list>

@Geeky Sir, Im updated my question – core114 Dec 12 '17 at 13:53 — core114, Dec 12 '17 at 13:53
@delinear Sir `display: inline-block;` is not work – core114 Dec 12 '17 at 13:56 — core114, Dec 12 '17 at 13:56

score 1 · Answer 1 · answered Dec 12 '17 at 13:56

1

You just need to add float:left; to li tag. And padding: 0; is also required if additional padding is applied from parent elements.

answered Dec 12 '17 at 13:56

AddWeb Solution Pvt Ltd

21,025
5
26
57

Sir ,Thanks for your solution – core114 Dec 13 '17 at 06:44

score 1 · Accepted Answer · answered Dec 12 '17 at 13:59

1

As per my comment, you need to set the font of the Ul to 0 and then reset it on the LIs, like so:

.days {
  font-size: 0;
}
.days li {
  font-size:12px;
}

This should remove the white-space between the LIs.

answered Dec 12 '17 at 13:59

delinear

2,745
1
10
21

Sir ,Thanks for your solution – core114 Dec 13 '17 at 06:44

css border-top issue,cant added to one line

2 Answers2