2

我的代码有

<input class="menu_button" type="submit" value="Log in">
<a href="register.php" class="menu_button">Register</a>

a href 在我的 css 中完美地设置了样式，而 type = submit 的输入按钮却没有...

我怎么能改变

进入aa href？

这是一个jsfiddle。

http://jsfiddle.net/26tyd/

看看按钮看起来有何不同。一个更高一点，另一个更小一点是完美的。请帮我弄清楚如何解决这个问题。

将此添加到您的CSS：

input[type=submit]{
    height: 22px;
    line-height: 18px;
    cursor: pointer;
}
4

5 回答 5

0

而不是像您目前正在使用的高度和宽度，您应该使用填充，因为这样文本是垂直居中的。

未发送的原因是因为您当前未使用表单，因此您需要在表单中所需的内容周围添加表单标签，以便您可以使用它：

<form action='#' method='get'>
    <input class="menu_button" type="submit" value="Log in" />
</form>

这是一个工作小提琴：

http://jsfiddle.net/Hive7/26tyd/3/

于 2013-09-27T16:07:19.037 回答
0

您只需要在代码中添加以下代码：

    box-sizing: border-box;
    -moz-box-sizing: border-box;

并调整高度，我建议您使用“最小宽度”和“填充”。因为给出“宽度”和“高度”可以限制你的按钮，如果你有更多的测试或填充，高度和宽度不会让背景增加。

请查看更新后的代码：-

.menu_button {
   -moz-box-shadow:inset 0px -1px 0px 0px #000000;
    -webkit-box-shadow:inset 0px -1px 0px 0px #000000;
    box-shadow:inset 0px -1px 0px 0px #000000;
    background-color:#000000;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #fa1e0f;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:12px;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #33302f;
    box-sizing: border-box; /*ADDED*/
    -moz-box-sizing: border-box; /*ADDED*/
    padding:5px;
}

希望这可以帮助！

于 2013-09-27T16:09:02.027 回答
0

尝试

margin: 0;
padding: 0;
white-space: normal;
box-sizing: content-box;

用户代理样式表对标签input的样式与a标签不同。

于 2013-09-27T16:09:28.500 回答
0

据我了解，您需要将两个元素的样式设置为相同？这是一个解决方案：

JSFIDDLE 演示

.menu_button {
    -moz-box-shadow:inset 0px -1px 0px 0px #000000;
    -webkit-box-shadow:inset 0px -1px 0px 0px #000000;
    box-shadow:inset 0px -1px 0px 0px #000000;

    background-color:#000000;
    text-indent: 0;
    border: 1px solid #fa1e0f;
    display: inline-block;
    color: #fff;
    font: normal 12px/1 Arial;
    width: 58px;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    text-shadow: 1px 1px 0px #33302f;
    padding: 5px 0;
    ouotline: 0 none;
    margin: 0;
}
/*this is needed for firefox and buttons */
.menu_button::-moz-focus-inner { border: 0; padding: 0; outline: none; }
于 2013-09-27T16:12:10.317 回答
0

将此添加到您的CSS：

input[type=submit]{
    height: 22px;
    line-height: 18px;
    cursor: pointer;
}
于 2013-09-27T15:47:41.940 回答