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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4319閲覧

css、flexの中央寄せ状態で文字列を左寄せ(行頭揃え)したい

tonpoko

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/06 16:51

編集2020/12/07 07:18

お世話になっています。
表題の通りリストを横表示させ中央寄せしたときに行頭を揃えることにつまづいています。
リストの縦表示は

css

1.sample { 2 margin: 16px auto; 3 text-align: center; 4 display: block; 5 border: 1px solid #000; 6} 7.sample ul { 8 padding-left: 0; 9 list-style: none; 10 display: inline-block; 11} 12.sample ul li { 13 text-align: left; 14}

こちらの方法で可能ですが横表示のやり方が見つけられませんでした。

該当のソースコード

html

1<div class="sample"> 2 <ul> 3 <li><span></span></li> 4 <li><span>あい</span></li> 5 <li><span>あいう</span></li> 6 <li><span>あいうえ</span></li> 7 ...more 8 </ul> 9</div>

css

1ul { 2 display: flex; 3 flex-wrap: wrap; 4 justify-content: center; 5 text-align: center; 6 list-style: none; 7} 8.sample ul li { 9 width: calc(90% / 2); 10 border: 1px solid #000; 11 /* text-align: left; */ 12}

試したこと

ul li span{
text-align: left;
border: 1px solid #000;
}

などで幅を取ろうとしましたが、そもそも文字列の長さが統一ではないので頓挫しました

わかる方、お力をお貸しいただければ幸いです。よろしくお願いいたします。m(_)m

*追記
リストは4つ固定ではなく縦に3行、4行と続くことが前提です。なおflexでなく、htmlの変更も構いません。ただ1行に2列か3列か、もしくはもっとか(calc(90% / 2)のことろ)は汎用性が必要です。
*回答を1ついただいて。
リスト親要素(ul)は中央寄せして、1行2列だと、左右の余白と中央の余白、この3つがなるべく等間隔になり、その上で行頭が揃うコードを望んでいます。
tomtomtomtomさんの回答だと子要素(li)内でテキストが左寄せになり、右の余白が大きくなり左の余白がなくなります。

求めるものがわかりづらくて申し訳ありません。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2020/12/06 23:20

HTMLの変更は可能ですか。 li要素の数は4で固定ですか。
tonpoko

2020/12/07 06:35

指摘をありがとうございます。修正箇所を追記しました
tomtomtomtom

2020/12/07 08:16 編集

こちら無料奉仕で回答をしております。 追記のように書かれるのは、あまり良い気はしません。 誠に申し訳ありませんが、回答は削除依頼を出しました。 それでは失礼致します。
guest

回答2

0

ベストアンサー

htmlの変更をしてもいいのなら、下記のように1列目と2列目を分割することになると思います。

html

1<div class="sample"> 2 <ul> 3 <li> 4 <span></span> 5 <span>あいう</span> 6 </li> 7 </ul> 8 <ul> 9 <li> 10 <span>あい</span> 11 <span>あいうえ</span> 12 </li> 13 </ul> 14</div>

css

1.sample { 2 display: flex; 3} 4.sample ul { 5 padding-left: 0; 6 list-style: none; 7 border: 1px solid #000; 8 width: 50%; 9 display: flex; 10 flex-direction: column; 11 align-items: center; 12} 13.sample ul li { 14 display: flex; 15 flex-direction: column; 16 text-align: left; 17}

htmlの変更なしでなら、jsで<li>の最大幅を取得して、それをすべての<li>の幅に設定するというような方法にするしか思いつかないです。

投稿2020/12/07 07:12

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tonpoko

2020/12/07 13:19

回答をありがとうございます。お答え頂いたコードで望んだ状態で表示されています。いまhtmlを変更しない方法など試しているので、ベストアンサーは今しばらくお待ち下さい。ありがとうございました。
guest

0

position:absolute と spanに横幅を持たせることで強引に中央寄せにしました。
質問の仕方が悪くご迷惑をおかけしました。申し訳ありません。

css

1.sample ul { 2 list-style: none; 3 display: flex; 4 flex-wrap: wrap; 5 justify-content: center; 6} 7.sample ul li { 8 position: relative; 9 width: calc(90% / 2); 10 min-height: 2.5em; 11 border: 1px solid #000; 12} 13.sample ul li span{ 14 position: absolute; 15 top: 50%; 16 left: 50%; 17 transform: translateY(-50%) translateX(-50%); 18 white-space: nowrap; 19 overflow: hidden; 20 text-overflow: ellipsis; 21 width: 50%; /* フレキシブルで変更 */ 22}

投稿2020/12/07 14:00

tonpoko

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問