Question

我正在构建一个移动网站，并希望有一些跨越整个屏幕宽度的按钮。

这是按钮：

<a class="btn" "href="http://www.myurl.com/">TEXXT</a>

CSS：

.btn {
  color: #ffffff;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 1px 6px 15px #666666;
  -moz-box-shadow: 1px 6px 15px #666666;
  box-shadow: 1px 6px 15px #666666;
  font-family: "NimbusCondensed";
  font-size: 28px;
  background: #0088CB;
  padding: 20px 50px 20px 50px;
  border: solid #000000 1px;
  text-decoration: none; }

我希望按钮的宽度可以调整到窗口，以适应不同的移动设备。

我已经调整了包含div，所以如果我可以将按钮设置为div宽度，那也可以。

谢谢！

Answer 1

试试这个：fiddle

.btn {
  width: 100%;
  color: #ffffff;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 1px 6px 15px #666666;
  -moz-box-shadow: 1px 6px 15px #666666;
  box-shadow: 1px 6px 15px #666666;
  font-family: "NimbusCondensed";
  font-size: 28px;
  background: #0088CB;
  padding: 20px 50px 20px 50px;
  border: solid #000000 1px;
  text-decoration: none; 
}

Answer 2

使用sizing with CSS3's vw units

＆＃13;

*{box-sizing: border-box; padding: 0; margin: 0}  /*Reset style*/
.btn {
  width: 100vw;   /*width of the viewport*/
  display: inline-block;
  text-align: center;
  color: #ffffff;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 1px 6px 15px #666666;
  -moz-box-shadow: 1px 6px 15px #666666;
  box-shadow: 1px 6px 15px #666666;
  font-family: "NimbusCondensed";
  font-size: 28px;
  background: #0088CB;
  padding: 20px 50px 20px 50px;
  border: solid #000000 1px;
  text-decoration: none
}

＆＃13;

<a class="btn" "href="http://www.myurl.com/">TEXXT</a>

＆＃13;

Answer 3

锚<a>标记默认为display : inline;，将其更改为display : block;，以便可以采用父宽度。

Demo

.btn {
    display:block;   <---------------------- /* just add this */
    color: #ffffff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0px;
    -webkit-box-shadow: 1px 6px 15px #666666;
    -moz-box-shadow: 1px 6px 15px #666666;
    box-shadow: 1px 6px 15px #666666;
    font-family:"NimbusCondensed";
    font-size: 28px;
    background: #0088CB;
    padding: 20px 50px 20px 50px;
    border: solid #000000 1px;
    text-decoration: none;
}

Answer 4

查看viewport-percentage Viewport-percentage lengths

width: 100vw;

Answer 5

为了使元素成为容器的宽度，

display: block;
width: auto;

是你的朋友。

按钮宽度调整为窗口宽度（或包含div）

5 个答案: