やったこと

HTML,cssでtableタグを使用せずに
cssでtableレイアウトを行った。

2列あるのだが、文字が長く入る方は三点リーダーを表示させるようにした。
だが、三点リーダーしない方と三点リーダーする方で位置がずれてしまい、原因が
わからなかった。

なぜ、ずれてしまうのでしょうか？

コード

html

<ul class="list">
  <li class="listItem">
    <p class="text">テスト</p>
    <div class="mainText">サンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>
  </li>
</ul>

css

.list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.listItem {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.text {
  display: inline-block;
  border-right: 1px solid #333;
  padding-right: 8px;
  margin: 0;
}
.mainText {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

画像

.textにもhiddenを指定した場合

spookybird

2018/08/27 03:16

あなたが提示したコードで画面を表示してみたものがこれです。https://jsfiddle.net/ 何が問題なのか、このコードからはわかりません。問題の事象が再現できるコードを提示してください。

退会済みユーザー

2018/08/27 03:24

問題が起きたコードを提示しています。ブラウザ依存なんですかね

spookybird

2018/08/27 03:29

ああぁぁ寝ぼけてたっぽいです。すみません。URLもおかしいしCSSも中途半端でした。https://jsfiddle.net/9fb26v38/ すみませんでした。

退会済みユーザー

2018/08/27 03:33

ありがとうございます。ちなみに https://jsfiddle.net/9fb26v38/ こちらだとspookybirdさんの方ではずれていないですか？今確認させて頂いたのですがやはりずれています。。

kei344

2018/08/27 07:22

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

inline-blockで並べるときはvertical-alignを指定しないとずれますよ。
.textと.mainTextに vertical-align:top;でもいれれば解決するかと

投稿2018/08/27 04:13

sousuke

総合スコア3828

退会済みユーザー

2018/08/27 04:18

上で書き忘れたのですがvertical-align:bottom;を指定して解決はしていました。なぜそうなるのかを聞きたかったのですが、 `インライン要素のデフォルトがベースライン合わせ`だからずれてしまったってことなんでしょうか？

yukihisa

2018/08/27 04:49 編集

後出しが過ぎると回答してもらえなくなりますよ。 >flex使わない方法も知りたいだけです。 >今回flexを使わない方法でやったら原因がわからないバグが起きたので >なぜこうなっているのかを知りたかっただけです。 >上で書き忘れたのですがvertical-align:bottom;を指定して解決はしていました。 >なぜそうなるのかを聞きたかったこれでは回答者が回答するために考えた時間がまるっと無駄になった+回答したら文句を言われただけになっています。レイアウトに関しては他にもたとえば<p>タグを<div>で囲んで必要な部分をmainTextと同じ設定にする(displayとoverflow)とか、体裁を気にしなければやり方自体はいくらでもあります。デフォルトがベースライン合わせなのは正しいですが、原因はoverflow:hidden が指定されたことによって、「要素ボックスの垂直位置」がalignの対象になったためです。そのため、vertical-alignで強制的に位置あわせをするか、両方の要素にoverflow:hiddenを設定するというのが答えです。

退会済みユーザー

2018/08/27 05:06

ありがとうございます。ご指摘頂きありがとうございます。以後気をつけます。。。

yukihisa

2018/08/27 05:14 編集

ちなみに、「inline-block　overflow」でググると今回の現象について答えが書かれているページが一番にヒットします。これを見ると「overflowが片方にしかないからずれる」「vertical-alignが指定されてないからずれる」と、回答者お二人の答えが両方とも正解だったことが分かると思います。

退会済みユーザー

2018/08/27 05:20

ググってみます！ありがとうございました。

sousuke

2018/08/27 05:41

ちょっと見ないうちに…。私も詳しく存じ上げてはなかったのですが今回明確な回答を得るきっかけを得られたので良かったです。 inline-blockでheightを指定しないことがあまりなかったので慣習的にやっていましたので助かりました。

yukihisa

2018/08/27 06:01

sousuke　様横から長々と書いてしまい申し訳ないです。夏休みだからか最近質問する⇒回答がつく⇒後付で新しい設定が出てくる⇒繰り返し･･･や丸投げなものが多く、指摘するにも回答としては出揃っていたように見えたのでコメントで失礼しました。実際はなんとなく対応方法は知っているだけで十分だったりしますよね！僕も「なるものはなる」として使ってるものが多々あります、できれば全て理解して使いたいものですが。。。

行動規範の内容に同意します