横並びを解除したい（CSS）

Question

前提・実現したいこと

横並びを解除したい

該当のソースコード

<div class="box2">

<!--  ナビゲーション  -->
  <nav class="nav">
  <ul>
  <li><a href="#">ガイド</a></li>
  <li><a href="#">レビュー</a></li>
  <li><a href="#">Q & A</a></li>
  </ul>
  </nav>

<!--  検索  -->
  <input class="search" type="search" size="30" placeholder="何をお探しですか？">

</div>

/*navとsearchを横に並べる設定*/
.box2:after{
  content: "";
  display: block;
  clear: both}

.nav{
  float: left;
  width: auto}

.search{
  float: right;
  width: auto;
  margin-top: 8px}

補足情報

@media(max-width: 599px)の時に解除したい

Comments

[y_waiwai]

なんの横並びでしょうか

あまりに説明不足で意味不明です

[BornonJune6th]

上記のコードの横並び設定を解除するコードがわからないということなのですが、説明不足ですか？

[yambejp]

HTMLがないと、なにがどう横並びか判断つきません
そもそもfloatで横並びにする必要はあるのでしょうか？

[BornonJune6th]

floatで横並びにしてあるものを解除する方法を求めています。これは他の人が描いたコードなので。

Answer 1

min-widthに入れ込んでしまっては？

@media(min-width:599px){
.box2:after{
  content: "";
  display: block;
  clear: both;
}
.nav{
  float: left;
  width: auto;
}
.search{
  float: right;
  width: auto;
  margin-top: 8px;
}
}

Answer 2

下記でどうでしょう？

@media screen and (max-width: 599px)  {
    .nav, .search {
        float: none;
    }
}

いまどき、float で横並びをするのは、？ですが。