[HTML] CSSをいじったらsubmitボタンが勝手に改行されました

Question

CSSをいじったらsubmitボタンが勝手に改行されました。
どうすれば改行されなくなるでしょうか？

いじる前の状況

• submit (解答する) ボタンにCSSはまったく設定していなかった。

いじった後

• 何故か改行されている。

試したこと

CSSのpositionプロパティがだめなのかと引数をstaticなどにしても変わらずです。ちなみにボタンに必要なスペースは十分あるはずなのになぜ勝手に改行されるのかがわかりません。

コード

input#ans_btn {
  width: 180px;
  padding:15px;
  color:#ffffff;
  font-size: 15px;
  line-height: 120%;
  text-align: center;
  text-decoration: none;
  background: #1B73BA;
  display: block;
  position:static;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3);
  -moz-box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3);
  box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3);
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

  <form method="post" action="">
      делатьのяの現在活用は？<input name="input" id="input" type="text" size="30" maxlength="30">
      <input id="ans_btn" name="answer" type="submit" value="解答する">
  </form>

できましたー!(≧∀≦)

hatsuさんのアドバイスでdisplay: block;をdisplay: inline-block;にして解決しました！ありがとうございました<3

関連質問

現在ロシア語が学べるウェブアプリを構築中です。おかげさまで着実に構築できています(^▽^)

質問順

1. HTMLで取得した文字列をPythonで受け取る→比較→比較結果を表示したい。
2. python x htmlをherokuにBuildできたがApplication errorと表示される

Answer 1

display: block;

を設定したためですね。
以下のようにinline-block,inlineなどに変えてあげると改行されなくなります。

display: inline-block;

Displayプロパティの説明については、こちらがわかりやすいです！

Comments

[Yukiya025]

hatsuさん、こんにちは！回答ありがとうございました(≧∀≦) おかげさまで解決しました<3 positionばかりに気を取られてdisplayはスルーしていましたf^^;