Question

我设法使输入框响应但按钮没有在中心对齐

这是css代码

    .webdesigntuts-workshop button {
  background: linear-gradient(#333, #222);
  border: 1px solid #444;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 0 2px 0 #000;
  box-shadow: 0 2px 0 #000;
  color: #fff;
  display: block;
  font-family: "Cabin", helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  margin: 20px;
  padding: 0 10px;
  padding-bottom: 2px;
  text-shadow: 0 -1px 0 #000;
  display: inline-block;
  width:100%;
  max-width:120px;
  float:center;

}

这是整个Codepen链接

https://codepen.io/anon/pen/XZrqzZ

Answer 1

事实上，你的代码很乱。然而，问题不是按钮，而是输入。输入中的边距将其推出屏幕，因为宽度为100％。因此，输入占据屏幕的100％加上边距，将其推出预期的布局。

在你的css中试试这个：

.webdesigntuts-workshop input{
  margin: 0;   /* Put 0 */
  width: 100%;
}

.webdesigntuts-workshop button {
  margin: 0 auto;   /* Add this */
}

按钮未在中心对齐

1 个答案: