HTML:我需要把所有的按钮保持在同一行，如果按钮的数量超过窗口width.how，我能解决这一行问题吗？
HTML:我需要把所有的按钮保持在同一行，如果按钮的数量超过窗口width.how，我能解决这一行问题吗？
提问于 2016-11-01 05:28:36
我的项目名称是Google应用程序，我已经在这个项目中工作了。
这是我面临的一个问题，我需要把所有的按钮保持在同一行，如果它超过了我的项目中的窗口宽度also.but，那么这些按钮就会被剪切并移到下一个line.how --我能解决这个问题吗
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;
}<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>
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-11-01 05:45:40
除了使用宽度大小之外，还有一种选择--使用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>
Stack Overflow用户
发布于 2016-11-01 05:33:15
不是以像素表示宽度，而是在%中给出宽度。
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: 8%;
height: 50px;
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;
}<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>
我希望这对你会有帮助。:)
Stack Overflow用户
发布于 2016-11-01 05:54:14
试试这个..。
使用相同的代码，只需将white-space: nowrap;属性交给.limit类，该属性将不允许包装，因此会自动滚动。
希望这个解决办法能解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40354573
复制相关文章
相似问题
腾讯云开发者
