在列表中显示内联

Question

我无法在列表中显示div以内联显示。似乎造成了换行。

我尝试使用一个清晰​​的div，将主体字体大小设置为0，重新排列html和其他所有内容都无济于事。

jsfiddle：https://jsfiddle.net/Loy4a2st/1/

.guiding_more_info_button{
  cursor:pointer;
  display:inline;
}
.guiding_more_info{
  margin-left:3rem;
  display:none;
}


<h2>Itinerary</h2>

<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>

<li>
    <p>Day 03</p>
    <div class="guiding_more_info_button">+ more info
        <div class="guiding_more_info">
            <p>more info here</p>
        </div>
    </div>
</li>

<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>

Answer 1

P标签block元素，将p标签应用于inline

.guiding_more_info_button{
  font-family:maratExtraLightItalic;
  cursor:pointer;
  display:inline;
}
.guiding_more_info{
  margin-left:3rem;
  font-family:maratExtraLight;
  display:none;
}
.inline{
display:inline;}

    <h2>Itinerary</h2>
<ul>

    <li><p>Day 01 </p></li>
    <li><p>Day 02</p></li>

    <li>
        <p class="inline">Day 03</p>
        <div class="guiding_more_info_button">+ more info
            <div class="guiding_more_info">
                <p>more info here</p>
            </div>
        </div>
    </li>

    <li><p>Day 04</p></li>
    <li><p>Day 05.</p></li>
    
</ul>

Answer 2

我已经使用了您的代码并进行了一些调整。

.guiding_more_info_button {
  font-family: maratExtraLightItalic;
  cursor: pointer;
  display: inline-block;
}

.guiding_more_info {
  margin-left: 3rem;
  font-family: maratExtraLight;
  display: none;
}

#day3 {
  display: inline-block;
}

<h2>Itinerary</h2>

<li>
  <p>Day 01 </p>
</li>
<li>
  <p>Day 02</p>
</li>

<li>
  <p id="day3">Day 03</p>
  <div class="guiding_more_info_button">+ more info
    <div class="guiding_more_info">
      <p>more info here</p>
    </div>
  </div>
</li>

<li>
  <p>Day 04</p>
</li>
<li>
  <p>Day 05.</p>
</li>

您可以在此处查看小提琴：

https://jsfiddle.net/fo6ryj29/

您需要使两个要显示的元素彼此相邻display:inline-block。

在您的情况下，div和p标记。

Answer 3

您的html书写不正确。您需要将<li>包裹在<ul>元素中，以使其正常工作。

.guiding_more_info_button{
  font-family:maratExtraLightItalic;
  cursor:pointer;
  display:inline;
}
.guiding_more_info{
  margin-left:3rem;
  font-family:maratExtraLight;
  display:none;
}

    <h2>Itinerary</h2>
<ul>

    <li><p>Day 01 </p></li>
    <li><p>Day 02</p></li>

    <li>
        <p>Day 03</p>
        <div class="guiding_more_info_button">+ more info
            <div class="guiding_more_info">
                <p>more info here</p>
            </div>
        </div>
    </li>

    <li><p>Day 04</p></li>
    <li><p>Day 05.</p></li>
    
</ul>