1

このリンクに CSS と html フォームがあります。http://jsfiddle.net/qLgCX/1/ 以下の出力で「更新」ボタンと「リセット」ボタンを同じ行に作成するにはどうすればよいですか? 送信ボタンが1つしかない他のいくつかのhtmlに同じCSSを使用しています。cssを変更すると、それらにも影響が及ぶのではないかと心配しています。ここに画像の説明を入力

ここに画像の説明を入力

#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
4

4 に答える 4

1

個人的に、私は誓いinline-blockます。も変更し、使用margin-leftした を削除する<br>必要がありました。更新されたバージョンは次のとおりです。

http://jsfiddle.net/qLgCX/3/

残りの部分を最適化するのに 1 週​​間を費やすことができます (あなたが行ったことを実行するためのはるかに簡単で拡張可能な方法があります) が、既存のコードにあまり影響を与えることなく、特定の問題を修正する必要があります。

于 2013-05-21T18:30:28.703 に答える
0

http://jsfiddle.net/qLgCX/10/

このソリューションは、ご要望の他のフォームには影響しません。ただし、ボタンにクラスを追加するなど、HTML を変更する必要があります。

私が変更したHTML：

<button type="submit" class="custom-submit" >Update</button>
<button type="reset" class="custom-reset">Reset</button>

私が追加したCSS：

#stylized button.custom-submit, #stylized button.custom-reset {
    float: left;
    clear: none;
    margin-left: 50px;
}

または、より効率的に実行したい場合は、必要なクラスは 1 つだけです。

<button type="submit" class="UpdateReset" >Update</button>
<button type="reset" class="UpdateReset">Reset</button>

そして、その CSS をセレクターに親なしで 1 回だけ適用できます。

.UpdateReset {
    float: left;
    clear: none;
    margin-left: 50px;
}
于 2013-05-21T18:37:03.853 に答える
0

新しいスタイル クラスを追加してみてください。

.mybutton { margin-left:20px !important;}

ボタンに適用します

私のフィドルの更新を参照してください

<button type="submit" class="mybutton">Update</button> 
<button type="reset" class="mybutton">Reset</button><br><br>

（送信後に改行タグも削除しました）

于 2013-05-21T18:46:43.183 に答える