Q&A
php:hello.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="practice8.css"> 7 <title>practice8</title> 8</head> 9<body> 10<div id="section6"> 11 <div class="inner"> 12 <div class="section6-top"> 13 <a class="for-beginner" href="https://www.yoga-plus.jp/flow/">はじめての方へ</a> 14 <a class="trial-booking" href="https://www.yoga-plus.jp/welcome/flow.php">体験予約</a> 15 <a class="section6-schedule" href="https://www.yoga-plus.jp/reservation/reservation.php">スケジュール</a> 16 </div> 17 <div class="container"> 18 <div class="studio-list-kantou"> 19 <p>スタジオ関東</p> 20 <ul class="studio-kantou"> 21 <li class="studio-kantou01"><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=193">二子玉川</a></li> 22 <li class="studio-kantou02"><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=46">高田馬場</a></li> 23 <li class="studio-kantou03"><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=30">目黒</a></li> 24 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=38">自由が丘</a></li> 25 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=92">人形町</a></li> 26 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=114">茗荷谷</a></li> 27 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=62">銀座</a></li> 28 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=43">阿佐ヶ谷</a></li> 29 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=33">五反田</a></li> 30 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=36">学芸大学</a></li> 31 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=155">川越</a></li> 32 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=32">横浜</a></li> 33 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=35">吉祥寺</a></li> 34 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=20">三軒茶屋</a></li> 35 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=57">西葛西</a></li> 36 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=191">下北沢</a></li> 37 </ul> 38 </div> 39 <div class="studio-list-kannsai"> 40 <p>スタジオ関西</p> 41 <ul> 42 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=47">心斎橋</a></li> 43 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=21">梅田</a></li> 44 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=22">梅田</a></li> 45 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=71">江坂</a></li> 46 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=74">江坂(岩盤浴)</a></li> 47 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=50">千里中央</a></li> 48 <li><a href="https://www.yoga-plus.jp/studioInfo/index.php?studio_id=59">三宮</a></li> 49 </ul> 50 </div> 51 <div class="contents6"> 52 <p>コンテンツ</p> 53 <ul> 54 <li><a href="https://www.yoga-plus.jp/rule/">ご利用について</a></li> 55 <li><a href="https://www.yoga-plus.jp/privacyPolicy/">プライバシーポリシー</a></li> 56 <li><a href="https://www.zenplace.co.jp/recruit.html?_ga=2.102624257.1406239120.1581342578-202617398.1581342578">採用情報</a></li> 57 <li><a href="https://www.yoga-plus.jp/siteMap/">サイトマップ</a></li> 58 <li><a href="https://corporate.zenplace.co.jp/?_ga=2.102624257.1406239120.1581342578-202617398.1581342578">会社概要</a></li> 59 </ul> 60 </div> 61 <div class="zenplace-group"> 62 <p>zen placeグループ</p> 63 <ul> 64 <li><a href="https://www.zenplace.co.jp/?_ga=2.27650876.1406239120.1581342578-202617398.1581342578">zen place（総合TOP）</a></li> 65 <li><a href="https://www.basipilates.jp/?_ga=2.27650876.1406239120.1581342578-202617398.1581342578">zen place pilates by basi pilates</a></li> 66 <li><a href="https://www.pilatesstyle.jp/?_ga=2.27650876.1406239120.1581342578-202617398.1581342578">zen place pilates</a></li> 67 <li><a href="https://www.bk-yoga.info/?_ga=2.27650876.1406239120.1581342578-202617398.1581342578">zen place strong</a></li> 68 </ul> 69 </div> 70 <div class="site"> 71 <p>関連サイト</p> 72 <ul> 73 <li><a href="https://www.yoga-works.jp/">YogaWorks</a></li> 74 <li><a href="https://www.wholebodyeducator.com/">インストラクター求人サイト</a></li> 75 <li><a href="https://www.yoga-plus.jp/yoga_column/">ヨガコラム</a></li> 76 <li><a href="https://www.pilates-education.info/">basiピラティス養成</a></li> 77 <li><a href="https://nurse.zenplace.co.jp/?_ga=2.94658588.1406239120.1581342578-202617398.1581342578">ぜん訪問看護ステーション</a></li> 78 <li><a href="https://www.yoga-plus.jp/yoga_column/">ヨガコラム</a></li> 79 <li><a href="https://nomind-nolife.com/">No Mind No Life</a></li> 80 </ul> 81 </div> 82 </div> 83 </div> 84 </div> 85</main> 86 87```css``` 88#section6 { 89 background-color: #4F4B4D; 90} 91#section6 a, #section6 p { 92 color: white; 93 text-decoration: none; 94} 95#section6 ul { 96 list-style: none; 97} 98.section6-top { 99 text-align: center; 100} 101.section6-top a { 102 font-size: 14px; 103} 104.studio-list-kantou p, .studio-list-kannsai p, .contents p, .zenplace-group p, .site p { 105 font-size: 12px; 106} 107.studio-list-kantou ul, .studio-list-kannsai ul, .contents ul, .zenplace-group ul, .site ul { 108 font-size: 13px; 109} 110.container { 111 display: flex; 112 position: relative; 113 justify-content: center; 114 top: 50px; 115} 116.studio-list-kantou, .studio-list-kannsai, .contents6, .zenplace-group, .site { 117 margin: 30px; 118 width: 600px; 119} 120 121.studio-list-kantou ul { 122 position: relative; 123 display: flex; 124 flex-wrap: wrap; 125 126 127} 128 129### 前提・実現したいこと 130liの要素を縦向きに３列にしたいのですがどうすればいいですか？ 131 132 133 134 135 136### 試したこと 137 138display:flexでflex-directionとflex-wrapを使ったのですがうまくいきませんでした。 139ネットで見つけたやり方でもやりましたがうまくいきませんでした。（grid-auto-flow: column;などを使うもの） 140 141 142 143 144### 補足情報（FW/ツールのバージョンなど） 145 146元のサイトのurlはhttps://www.yoga-plus.jp/です。 147よろしくお願いします！
回答1件
0
ベストアンサー
CSS
1.studio-list-kantou ul li { 2 width:33%; 3}
こういうことですか？
投稿2020/02/12 01:42
総合スコア2341
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/12 02:18