#下記のコメントフォームの横にコメントを表示したいのだが、floatで横並びにするとフォームの形が変化してしまいます。
##コード
html
1<div class="comments"> 2 <div class="comment1"> 3<form class="new_comment" id="new_comment" action="/videos/3/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="OsfAJoMSdYn9gJkXvgi9cNfAblTcJXky2YciYX64YyyO5HLShLFFt2lfw4QCBCKhEaprtiuJ7wTZcSckuBauBg==" /> 4 <div class="form-group"> 5 <p> 6 <label class="control-label col-xs-2" for="comment_commenter">Commenter</label></br> 7 <div class="col-xs-5"> 8 <input size="36" class="form-control" type="text" name="comment[commenter]" id="comment_commenter" /> 9 </div> 10 </p> 11</div> 12</br> 13<div class="form-group"></br> 14 <p> 15 <label class="control-label col-xs-2" for="comment_body">Body</label></br> 16 <div class="col-xs-5"></br> 17 <textarea class="form-control" name="comment[body]" id="comment_body" cols="50" rows="6"> 18</textarea> 19 </div> 20 </p> 21</div> 22 <div class="action"> 23 <div class="form-group"></br> 24 <div class="col-xs-offset-2 col-xs-10"> 25 <input type="submit" name="commit" value="コメント" data-disable-with="コメント" /> 26 </div> 27 </div> 28 </div> 29</form></div> 30 31 <div class="comment2"> 32 <p> 33 <strong>Commenter:</strong> 34 test 35 </p> 36 37 <p> 38 <strong>Commenter:</strong> 39 test 40 </p> 41 . 42 . 43 . 44 . 45</div>
css
1.comments { 2 overflow: hidden; 3} 4 5.comment1{ 6 float: left; 7} 8 9.comment2 { 10 float: right; 11} 12
もし原因がわかる方、いらっしゃいましたらご教授頂けないでしょうか。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー