css - 変換するで 私のコードは <input class="menu_button" type="submit" value="Log in"> <a href="register.php" class="menu_button">Register</a> a hr

Question

私のコードは

<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/

ボタンの外観がどのように異なるかをご覧ください。1 つは高く、もう 1 つは小さく、完璧です。この問題を解決する方法を教えてください。

Answer 1

コードに以下のコードを追加するだけです。

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

お役に立てれば！

Answer 2

これを css に追加します。

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

Answer 3

現在行っているように高さと幅を使用する代わりに、テキストが垂直方向に中央揃えになるため、パディングを使用する必要があります。

が送信されない理由は、現在フォームを使用していないためです。フォームに必要なものの周りにフォームタグを追加して、これを使用できるようにする必要があります。

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

これが実用的なフィドルです：

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

Answer 4

試す

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

タグのinputスタイルは、ユーザー エージェント スタイルシートによってタグとは異なりaます。

Answer 5

私が理解しているように、両方の要素を同じスタイルにする必要がありますか? ここに1つの解決策があります：

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