0

テーブル内にこれら2つの送信ボタンがあるWebアプリケーションがあります

   <input type="submit" value="Modifier" name="btn" style="display:inline" />
 <input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />

同じ行に表示したいのですが、次の結果が得られました。

デモ

なぜこれが起こるのですか？同じ行にボタンを表示するようにコードを修正するにはどうすればよいですか?

4

9 に答える 9

1

そうでない場合は列のサイズを大きくし、 「エクスポーター」autoに追加しますfloat:left

于 2013-10-11T08:57:31.237 に答える
1

テーブルの列の幅を広げたり、 を使用したりできdisplay: inline-blockますが、別のことをしたいかもしれません:

  • 2 つのボタンが広すぎて収まらないため、表/列の幅を大きくするのは自然なことのように思えます。

  • それができたら、float コンポーネントを使用したブロック表示のようなものを使用することをお勧めします。

インライン ブロックは、IE9 などの最近のバージョンでさえ、Internet Explorer ブラウザーでのパフォーマンスが低く、多くの訪問者がしばらくの間使用することになります。

input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
于 2013-10-11T09:00:34.847 に答える
1

個人的には、この css の方法には近づきません。これは、すべての送信ボタンがまったく同じであることを意味しますが、すべての送信ボタンでこのスタイルを使用したくない場合はどうでしょうか。ただし、その方法は、HTML ファイル内で css を実行するよりもはるかに優れています。

input[type=submit]{


}

送信ボタンに送信と呼ばれるクラスを与える方が良いです。そうすれば、スタイリングしたい送信を選択して選択できます

<input type="submit" class="submit">

.submit{
float: left;
etc. 
}

主な問題は、テーブルの列幅がおそらくそれらすべてにクラスを与え、外部 css ファイル内のニーズを満たす幅および/または高さを与えることです。

于 2013-10-11T09:14:48.953 に答える
1

ここに例があります..ブートストラップを使用します

http://jsfiddle.net/QYBHm/

<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>

サインアップまたはサインイン

于 2013-10-11T09:05:59.503 に答える
1

このスタイリングを試すことができます。

input[type="submit"] {
    float: right
}

フロート左を試すこともできます。

于 2013-10-11T09:01:36.047 に答える
1

コンテナ列の幅が足りないので、インラインでもこのように表示されます。その列の幅を変更して、それが問題かどうかを確認してください。

于 2013-10-11T09:14:34.217 に答える
0

このcssを試してください

input[type=submit] {
    display: inline-block;
    float: left; 
    width: /*adjust as per your table */;
}
于 2015-03-13T12:15:01.600 に答える