liのwidth指定について

  • 解決済 syojishoji

    (@syojishoji)


    8年、 8ヶ月前

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

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

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

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

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

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • munyagu

    (@munyagu)

    8年、 8ヶ月前

    33.3%では３つしか入らない計算になりますよね？
    ですので、幅の指定が無視されて自動的に拡縮されています。

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

    トピック投稿者 syojishoji

    (@syojishoji)

    8年、 8ヶ月前

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

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

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

    nobita

    (@nobita)

    8年、 8ヶ月前

    こんにちは

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

    .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)

    8年、 8ヶ月前

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

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

    munyagu

    (@munyagu)

    8年、 8ヶ月前

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

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