thiru arasu thiru arasu - 1 month ago 7
CSS Question

HTML: I need to keep all buttons in same line,if the number of buttons exceeds the window width.how do i solve this line issue?

My project name is Google Module Tab Application.I am already is working in this project.

here i am faces a problem.i need to keep all buttons in same line,if it exceeds the window width also.but in my project,the buttons cut over and move to the next line.how do i solve this issue

<style>
body
{
/*padding:100px;*/
}
.limit
{
width:1600px;
overflow:auto;
}
parent {
position:relative;
margin: 20px;
width: 800px;
height: 40px;

}
.button {
position:relative;
/*left:0;*/
display: inline;
width: 200px;
height: 75px;
background-color:lightgray;
font-size:large;
/*border:3px solid #ccc;
margin:0 10px 0;
box-shadow: 0 0 2px #fff inset;*/
-webkit-transform: perspective(100px)rotateX(30deg);
/*-o-transform:rotateX(30deg);
-ms-transform:rotateX(30deg);*/
-moz-transform: perspective(100px)rotateX(30deg);
}
.button:hover {
cursor: default;
}
.button:active
{
cursor:move;
z-index:40;
}
.button.drag {
z-index: 99;
background-color:orange;
}

</style>
<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="tab-1" class="button current " >Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>
</div>




The wrong ouput snapshot is attached here

Answer

Just an alternative to using a width size - the usage of flex:

 <style>
    body
    {
    /*padding:100px;*/
    }
    .limit
    {
    width:1600px;
     display:flex;
     flex-wrap:nowrap;
    }
    parent {
            position:relative;
            margin: 20px;
            width: 800px;
            height: 40px;

        }
    .button {
            position:relative;
            /*left:0;*/
            display: inline-flex;
            width: 200px;
            height: 75px;
            background-color:lightgray;
            font-size:large;
            /*border:3px solid #ccc;
            margin:0 10px 0;
            box-shadow: 0 0 2px  #fff inset;*/
            -webkit-transform: perspective(100px)rotateX(30deg);
            /*-o-transform:rotateX(30deg);
            -ms-transform:rotateX(30deg);*/
            -moz-transform: perspective(100px)rotateX(30deg);
            }
   .button:hover { 
    cursor: default;
  }
   .button:active 
  {
    cursor:move;
    z-index:40;
  }
  .button.drag {
     z-index: 99; 
     background-color:orange;
  }

</style>
<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="tab-1" class="button  current " >Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>
     </div>