質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

li要素 横並び

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 926

may88seiji

score 77

前提

li要素をpc版用に縦並びでおいてます。
イメージ説明

実現したいこと

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

試したこと

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

追記

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

イメージ説明

該当のソースコード

.li_mypage a{
    text-decoration: none;
}
.home{
    margin-top: 28px;
}
.account{
    margin-top: 12px;
}
.btn_mypage{
    text-align: center;
    font-size: 15px;
    padding: 15px 45px;
    border-radius: 2px;
    margin-bottom: 15px;
    color: #000;
    font-weight: bold;
    background-color: #ffde00;
}
.btn_mypage:hover{
    opacity: 0.8;
    -webkit-animation: flash .6s ease-out both;
    animation: flash .6s ease-out both;
}
<ul>
            <li class="li_mypage"><a href="/mypage/"><div class="btn_blue home btn_mypage ">ホーム</div></a></li>
            <li class="li_mypage"><a href="/mypage/account/"><div class="account btn_mypage">アカウント</div></a></li>
        </ul>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/09/27 00:43

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

    キャンセル

  • may88seiji

    2016/09/27 00:55

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

    キャンセル

回答 1

checkベストアンサー

+3

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

@media screen and (max-width: xxxx) {
  .li_mypage {
    display: inline-block;
    vertical-align: top;
  }
  .home{
      margin-top: 0;
  }
  .account{
      margin-top: 0;
  }
}

他にはfloat、display:table-cell、display:flex などでも横並びにできます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/26 23:58

    ありがとうございます!
    marginが原因でした。

    キャンセル

  • 2016/09/27 00:59

    追記の分について。
    該当コードより上の階層のどこかでdirection:rtl; (文字表記の方向を右から左する)が指定されていたりしません?
    いずれにせよ、現在掲載されているHTMLとCSSだけでは原因の特定はできません。

    キャンセル

  • 2016/09/27 19:04

    aKusanoさま
    返信ありがとうございます。
    別ファイルからfloatがかかっておりました。解決しております。大変失礼しました。

    キャンセル

  • 2016/09/27 20:14

    そうでしたか。解決してよかったです( ´∀`)

    キャンセル

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る