I have dynamic list of buttons (5 in a row) with table-cell display property.I want buttons text to be in the center of table-cell as shown on the pic and doesn't go to next line when page is viewed on iPhone screen.Could you guys tell me what changes should I make to css to achive it?Thanks in advance.
JavaScript part:
<script>
$(document).ready(function () {
$(".myModal").on("click", "li", function(){
$("li.menu__item").removeClass("menu__item--active");
$(this).addClass("menu__item--active");
var outlineButtonclass=this.className;
var title = $(this).attr('title');
alert("selected size:"+title);
});
});
</script>
Style part:
<style>
.menu__element {
border: 1px ;
font-size: 14px;
}
li {
/* adds table cell around each li */
display:table-cell;
width: auto;
padding: 20px 20px 40px 20px;
position: relative;
border: 1px solid #000;
padding: 5px 10px;
}
ul{
border-spacing: 17px;
border-collapse: separate;
margin: 0; padding: 0;
}
.menu__item--active {
background: red;
}
</style>
UL part:
<!-- Modal content -->
<div class="modal-content" style="max-height:calc(100vh - 110px);overflow-y: auto;">
<span class="close">×</span>
<br>
<div class="sizeLabell">Size<span class="form-asterisk"></span></div>
<ul class="square-list" id="square-list">
<li class="menu__item" title="36"><button name="size" type="button" class="menu__element" value="0" title="36">36</button></li>
<li class="menu__item" title="37 1/3"><button name="size" type="button" class="menu__element" value="1" title="37 1/3">37 1/3</button></li>
<li class="menu__item" title="38 2/3"><button name="size" type="button" class="menu__element" value="2" title="38 2/3">38 2/3</button></li>
<li class="menu__item" title="48"><button name="size" type="button" class="menu__element" value="3" title="48">48</button></li>
<li class="menu__item" title="48 2/3"><button name="size" type="button" class="menu__element" value="4" title="48 2/3">48 2/3</button></li><br>
<li class="menu__item" title="49 1/3"><button name="size" type="button" class="menu__element" value="5" title="49 1/3">49 1/3</button></li>
</ul>
</div>
</div>
Try adding white-space: nowrap;
to your LI element's CSS.
li {
display: table-cell;
width: auto;
padding: 20px 20px 40px 20px;
position: relative;
border: 1px solid #000;
padding: 5px 10px;
white-space: nowrap;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.