javascript - 按钮宽度调整为窗口宽度(或包含 div)

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; 
}