Question

我的代码有

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

a href在我的css中完美样式，而输入按钮的类型=提交不...

我怎么能改变

进入一个href？

这是一个jsfiddle。

http://jsfiddle.net/26tyd/

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

Answer 1

将此添加到您的css：

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

Answer 2

不要像目前那样使用高度和宽度，而应使用填充，因为文本是垂直居中的。

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

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

这是一个工作小提琴：

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

Answer 3

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

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

为了调整高度，我会用“min-width”和“padding”来玩你。由于给出“宽度”和“高度”可以限制你的按钮，如果你有更多的测试或填充，高度和宽度将不会让背景增加。

请参阅更新的代码： -

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

希望这有帮助！

Answer 4

尝试

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

input代码的样式与用户代理样式表的格式不同，而不是a代码。

Answer 5

据我所知，你需要将两个元素的样式相同吗？这是一个解决方案：

<强> JSFIDDLE DEMO

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

在a中转换<input form =“”/>

5 个答案: