float: right;を使ったのに文字が右に並ばない

文字が右に並びません。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'accounts/top.css' %}">
  </head>
  <body>
　<div class="heading">
        <h1>LOVEYOU</h1>
        <h3>XOXO</h3>
　</div>

　<div class="newaccount">
  <h2>新規アカウントを登録する</h2>
　<h3>ご利用は全て無料です</h3>
  <form class="my-form" action="{% url 'accounts:regist_save' %}" method="POST">
      <div class="form-group">
        <label for="id_username">ユーザネーム</label>
        {{ form.username }}
        {{ form.username.errors }}
      </div>

      <div class="form-group">
        <label for="id_email">Eメール</label>
        {{ form.email }}
        {{ form.email.errors }}
      </div>
      {% csrf_token %}
    </form>
  </div>

</body>
</html>

今、class="heading"の文字がブラウザの左にあり、
class="newaccount"の文字がブラウザの下にあります。
理想のアウトプットは、class="heading"の文字がブラウザの左にありclass="newaccount"の文字がその横にある状態です。
CSSに（top.cssに）

.heading{
　float: left;
  padding-left:100px;
}

.newaccount{
　float: right;
}

と書いたのに、class="newaccount"の文字はclass="heading"の文字がある（ブラウザの左側）下にあります。
なぜこうなってしまうのでしょうか？またどう直せば、class="heading"の横にclass="newaccount"の文字が並ぶのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

float以外に、は「dislpay:inlien-block;」とすることで、横並びになります。
もしくは、positionを使って左右に割り当てるという方法もあります。

私が検証したものですと、以下のCSSのようにすることで横並びにできました。
（横並びの間隔や位置などは省略し横並びに必要なものだけ）

CSS
1.heading{
2  display:inline-block;
3}
4
5.newaccount{
6  display:inline-block;
7}

投稿2017/10/02 12:33

8yazaki

総合スコア454

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

LOVEYOU

XOXO

新規アカウントを登録する

ご利用は全て無料です

関連した質問