2017-12-09 24 views
0

背景:今W3CSS:中心入力フィールド

https://www.w3schools.com/w3css/w3css_input.aspは、私が中心に難易度のビットを持つブランドの新しいウェブサイト&に始めています:アイブ氏は&このウェブサイトからの私の知識を取得し、W3CSSを使用していくつかの小さなウェブサイトを行って入力フィールド。 (フォームはまだ動作しません、私はちょうどそれを右に見せようとしています)。

http://clubs.kwister.com/login

基本的には、電子メールアドレスを尋ねる二つの形式を見ることができます。最初のものはCENTEREDで、入力フィールドの幅は50%です。しかし、人が自分の電子メールアドレスを入力する実際の入力フィールドは、左側にフラッシュされます。

第2の形式では、幅:50%を取り出しましたが、画面の全幅を取る入力フィールドが表示されています。

実際に入力フィールドが中央に配置されていますが、幅の40〜50%しか表示されないように見えるように、何かがありますか?

私はW3ウェブサイトから「幅」の例はなく、すべての入力フィールドは利用可能な幅の100%を占めることがわかります。

私は

PS私はW3-第三のクラス(応答セクション)を行うことができます(私はや空白を埋めるために、後には何も追加しない場合があります)、画面を分割両側に空白をしたいですかしかし、私はフォームが画面の幅の3分の1以上を占めるようにしたい。

答えて

0

入力フィールドを中央に配置する簡単な方法があります。 position: relative;left: 25%;に設定したり、親フォームにtext-align: center;を設定したりすることで、センターを中央に置く方法があります。あなたが何をしているかによって異なります。個人的には、私は相対的なポジションをとって行きました。

希望するものは

psです。私は使用しようとしないだろうdisplay: inline-block;使用display: block; float: left;

+0

Iveの番号は1です(幅:50%; text-align:center;) - まだ左揃えです。 2)(position:relative; left:25%;)は実際の入力フィールドに 'position:relative;'と 'left:25%;'を設定したままで、依然として全幅 – sarah

+0

を占めていますか?愚かな質問ですが、私はそれが非常に頻繁に犯人であることがわかります... –

+0

私はあなたのコードを見て、 'text-align:center;'はフォームそのものです。助言。これを試してください: '

0

Iveはインラインブロックを使用して、実用的な解決策を見出した。

幅:50%; text-align:center;表示:インラインブロック;

私の例の番号1が機能しています。他のものを編集します。

関連する問題