htmlに
<header class="clearfix"> <nav> <h1 class="title">AAA</h1> <ul class="top-menu"> <h3 class="login">ログイン</h3> <div class="container"> <form action="{% url 'login' %}" method="post" role="form"> {% csrf_token %} <div class="form-group"> <label class="email_form">メールアドレス</label> <input for="id_email" name="email" type="text" value="" placeholder="メールアドレス" class="form-control"/> </div> <div class="form-group"> <label class="password_form">パスワード</label> <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/> </div> <button type="submit" class="btn btn-primary btn-lg">ログイン</button> <input name="next" type="hidden" value="{{ next }}"/> </form> </div> </ul> </nav> </header>
と書いて、cssには
*{ margin: 0; padding: 0; } .clearfix::after{ content: ""; clear: both; display: block; } header{ width: 100%; height: 100px; background-color: pink; } nav{ width: 90%; height: 60px; margin: 0 auto; text-align: left; } .title{ float:left; color:white; font-size: 70px; margin-top:10px; padding-top:-30px; padding-bottom:30px; padding-left:80px; padding-right:80px; } .top-menu{ float: right; width: 30%; line-height: 30px; }
と書きました。
top-menuクラスの値をいじっても、自分の目的の場所には移動せず、文字が縦並びになってしまったり位置が大分ずれてしまいます。top-menuクラスをtitleクラスの横に若干スペースを空けて持っていきたいのですが、どう描けばそうできますか?
それぞれの意味と用法をきちんと理解してから使うようにしてください。
回答1件
あなたの回答
tips
プレビュー