サポート » 使い方全般 » liのwidth指定について

  • 解決済 syojishoji

    (@syojishoji)


    ulとliを用いて、幅が均等な3列の表を作成しようとしているのですが、liにwidth:33.3%を指定しても効きません。

    自分なりに調べてみたものの、何が原因か見当がつかない状況です。
    他の部分では同様のCSSが機能しています。

    下記のURLのページの一番下にあるカテゴリリストが、当該部分です。
    http://childsapuri.com/1456-2/

    ご覧の上、正しいhtmlとCSSの書き方についてアドバイスを頂けると幸いでございます。

    何卒よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 33.3%では3つしか入らない計算になりますよね?
    ですので、幅の指定が無視されて自動的に拡縮されています。

    一番下の部分はli要素が7つあります。
    一つあたりは単純計算で14.28%になります。
    しかし、文字サイズを小さくしないと均等に7分割はできないと思います。

    トピック投稿者 syojishoji

    (@syojishoji)

    ご返信ありがとうございます。

    横には3つしか入れずに3列にしたいと考えています。
    縦は3行にして、1行目と2行目は3つのせ、3行目は一つだけのせるイメージです。
    ですので、3個しか入らないと問題ということにはならないです・・・。

    こちらのサイトの一番下のカテゴリリストのようにしたいと考えています。
    http://192abc.com/

    こんにちは

    プロパティの前に、全角スペースは使えないです。

    .category-list ul li{
     width: 33.3%;
      border-bottom: 1px #ededed solid;
      border-right: 1px #ededed solid;
      background-color: #fff;
      text-align: center;
      padding: 15px;
      float: left;
    }

    トピック投稿者 syojishoji

    (@syojishoji)

    解決しました。
    ありがとうございました。

    初歩的なミスで申し訳ありませんでした。

    と、とんちんかんな回答ですいませんでした・・・

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「liのwidth指定について」には新たに返信することはできません。