li要素　横並び

###前提
li要素をpc版用に縦並びでおいてます。

###実現したいこと
sp版用に横並びに変えたいのですが、きれいにならばず困っております。
sp版用のhtml cssの記述をお教えお願いします。

###試したこと
display を inline inline-blockに変更すること
→結果はずれてうまく横並びにできておりません。

####追記
akusanoさんのコードのように組んでみたところ、ホームとアカウントが左右逆にならんでしまいました。。。
（本来なら上のホームが左にくるのでは）
左右の距離の調整をmargin等で触れない状態になっています。
なぜでしょうか。。。

###該当のソースコード

css
1.li_mypage a{
2    text-decoration: none;
3}
4.home{
5    margin-top: 28px;
6}
7.account{
8    margin-top: 12px;
9}
10.btn_mypage{
11    text-align: center;
12    font-size: 15px;
13    padding: 15px 45px;
14    border-radius: 2px;
15    margin-bottom: 15px;
16    color: #000;
17    font-weight: bold;
18    background-color: #ffde00;
19}
20.btn_mypage:hover{
21    opacity: 0.8;
22    -webkit-animation: flash .6s ease-out both;
23    animation: flash .6s ease-out both;
24}

html
1        <ul>
2            <li class="li_mypage"><a href="/mypage/"><div class="btn_blue home btn_mypage ">ホーム</div></a></li>
3            <li class="li_mypage"><a href="/mypage/account/"><div class="account btn_mypage">アカウント</div></a></li>
4        </ul>

kei344

2016/09/26 15:43

追記文について、問題が再現しません。欠かれている以外の箇所が原因ではないでしょうか。 https://jsfiddle.net/63cvs3jn/

may88seiji

2016/09/26 15:55

kei344さん　ありがとうございます。別問題のようですね。失礼しました。原因を探して、それでもだめなら別トピを立てようと思います。

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

回答1件

ベストアンサー

inlineやinline-blockでも並びますよ。
きれいに並ばないのはliの中の要素にmargin-topをつけているからでは？
SPレイアウトの時にはそのmargin-topを0にしてみてください。

CSS
1@media screen and (max-width: xxxx) {
2  .li_mypage {
3    display: inline-block;
4    vertical-align: top;
5  }
6  .home{
7      margin-top: 0;
8  }
9  .account{
10      margin-top: 0;
11  }
12}