Question

我有3个按钮，前2个按钮必须有固定的宽度，第3个按钮应该占据页面的整个宽度，但它必须与其他两个按钮内联。像这样：

--- btn1 --- --- btn2 --- ------------------------------- btn3- ----------------------------------------

我尝试了一些东西，但它没有用，因为第三个按钮会转到下一行并占据整个屏幕尺寸。

HTML：

<div class="banner">
<button class="btn1">First button</button>
<button class="btn2">Second button</button>
<button class="btn3">Third button</button>
</div>

CSS：

.btn3 {
    width:100%;
}

http://jsfiddle.net/cabjcur2/embedded/result/

Answer 1

您可以使用css

中的calc函数

.btn1 {
   float: left;
   width: 200px;
}
.btn2 {
   float: left;
   width: 200px;
}
.btn3 {
   float: left;
   width: calc(100% - 400px);
}

看到这个小提琴：http://jsfiddle.net/3c2nf67m/

浏览器支持：http://caniuse.com/#search=calc

Answer 2

您还需要为其他人按钮定义width。并在它们之间分配宽度%。

.btn1 {
    width:15%;
}

.btn2 {
    width:15%;
}


.btn3 {
    width:60%;
}

如果其他按钮需要固定width，则将像素转换为%或向后隐藏。

Answer 3

.btn3 {
    width:80%;
}

调整宽度百分比，给它一个最大/最小宽度％，例如max-width：80％;最小宽度：30％;

执行此操作直至满足您对网站的需求

Answer 4

按钮宽度为100％将采用全屏显示。但是你已经有两个内联按钮，因此可以获得全屏宽度，然后进入下一行。

我试用了这块CSS而没有改变其他任何东西：

 .btn3 {
     width: 80%;
  }

按照您的预期正常工作。

FIddle：http://jsfiddle.net/xfaknxux/。但请记住，此代码片段不会将屏幕重新更改为帐户。它仅适用于全屏。

按钮的页面宽度与其他页面一致

4 个答案: