45033

[code]

    <div>
      <span>あ</span>
      <span>テスト１</span>
    </div>
    <div>
      <span>あい</span>
      <span>テスト２</span>
    </div>
    <div>
      <span>あいう</span>
      <span>テスト３</span>
    </div>
    
[/code]

上記のような html があったとして、表示すると以下のようになります。

[code]

    あ テスト１
    あい テスト２
    あいう テスト３
    
[/code]

これを css を使って以下のように、左端の要素の幅を最も幅が広い要素に合わせることは可能でしょうか。左端の要素の内容は可変のため、直接 width
を指定することはできません。

[code]

    あ　　 テスト１
    あい　 テスト２
    あいう テスト３
    
[/code]

`<table>` タグを使用して html の構造から変更したほうがよいでしょうか。


CC BY-SA 4.0
2018-06-24T07:57:08.070
45028
2018-06-24T13:29:20.173
3925
question
html css
左端の要素の幅を揃えたい


> タグを使用して html の構造から変更したほうがよいでしょうか。

以下はどうでしょうか。

タグの構造を変更しなくても(※)、 cssの
displayプロパティを変更することでテーブル表示することができます。(※ここでは、div.hogeのみ追加)

[code]

    .hoge {
        display: table;
    
        /* セルの枠線同士の間隔を指定. 左右に0.5remの間隔をあける */
        border-spacing: 0.5rem 0;
    }
    
    .hoge > div {
        display: table-row;
    }
    
    .hoge > div > span {
        display: table-cell;
    }
[/code]

[code]

    <div class="hoge">
      <div>
        <span>あ</span>
        <span>テスト１</span>
      </div>
      <div>
        <span>あい</span>
        <span>テスト２</span>
      </div>
      <div>
        <span>あいう</span>
        <span>テスト３</span>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2018-06-24T13:29:20.173
45033
2018-06-24T13:29:20.173
45028
answer