ブロック要素の直後、改行せずにdetailsを配置したい

Question

掲載画像の[理想]の方をご覧頂ければ分かりやすいと思うのですが、spanタグの直後に改行せずにdetailsを配置したいです。
どうすればよいでしょうか。

spanは横幅を固定したいので、inlineに出来ません。
※spanは文字を表示するだけなので、他のタグで代用可能ならそれでも問題ありません。

尚、理想の方は、HTMLとCSSで表示したものではなく、スクリーンショット画像を編集した物です。

<style>
ul {
  list-style-type : none;
}

span {
  display : inline-block;
  width : 4em;
  border : 1px solid #0000FF;
  border-right : none;
}

details {
  height: 2em;
  transition : 0.3s;
}

details[open] {
  height : 10em;
  transition : 0.3s;
}

details[open] > summary {
  border-bottom : none;
}

summary {
  text-decoration : underline;
  cursor : pointer;
  border : 1px solid #0000ff;
}

details > div {
  margin-left : 4em;
  border : 1px solid #0000ff;
  border-top : none;
}

</style>
<ul>
<li>
<span>No.1</span><details><summary>1番目のタイトル</summary><div>No1.の内容</div></details>
<span>No.2</span><details><summary>2番目のタイトル</summary><div>No2.の内容</div></details>
</li>
</ul>

Answer 1

CSS FlexBox を使うといいでしょう。

/* 追加 */
li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}


/* 修正 */
details {
  width: calc(100% - 4em - 5px); /* 親要素の幅に一杯になるように調整 */
  height: 2em;
  transition : 0.3s;
}

Comments

[退会済みユーザー]

理想通りに出来ました。本当にありがとうございます。