Html 扩展Div-CSS

目前，我正在重新设计我们足球队页面的fixture部分，并希望添加一些功能，以便单击fixture（很可能是日期），然后它会“展开”，并显示fixture的详细信息

将显示的细节包括开球时间、赞助商和记分员等

我将修改以前的代码以进行实际扩展，但就我的一生而言，我无法理解为什么要显示这个Div的Div被限定为li标记中第一个Div的宽度

该部门是在li关闭之后，所以我认为这会阻止这种情况的发生。希望有意义，代码如下：

    <ul>
        <li>
          <div class="cell"><span><a>July 7th</a></span></div>
          <div class="cell">
            <span>Nairn County</span>
            <span class="h-score">0</span>
            <span>Inverness Caledonian Thistle</span>
            <span class="a-score">3</span>
          </div>
          <div class="cell"><span>Friendly</span></div>
        </li>
        <div class = "fixture-info">
          <div class = "kickoff">Kickoff: <span>1930</span></div>
          <div class = "match-sponsor">....</div>
          .........
        </div>

        <!--Next Fixture-->
        <li>....</li>

（扩大）

它现在的样子

    July 7th Nairn ..........
    Kickoff:1
    930
    Match Spo
    nsor(s): M
    adeup spon
    sor

我希望fixture info div与li的宽度相同，而不是其中的第一个宽度。 谢谢你的帮助

更新 已将div移动到li标记中。我从建议的答案中得到了非常不同的结果。我认为这是因为前一个div被显示为表单元格以保持所有内容不变，内联块忽略了这一点

我上传了正在发生的事情的图片

第一个是内联块样式。 第二个是在li标签内移动的细节。 第三是我希望它是怎样的，它是怎样的正常。我想要这个 夹具信息与who夹具相同（日期、夹具和类型）

简单解决方案： 使用

显示：内联块

强制这些div在同一行中。因为默认情况下div有

display:block

，这将占用整行

.cell {
  display: inline-block;
}

使用jQuery中的toggleClass：

$(document).ready(function() {
  // Slide
  $('ul > li').click(function() {
    $(this).next('.fixture-info').toggleClass('collapsed').slideToggle('fast');
  });
});

并首先使用css隐藏所有子节：

.fixture-info {
  background-color: lightgray;
  display: none;
}

$（文档）.ready（函数（）{
//滑梯
$（'ul>li'）。单击（函数（）{
$（this）.next（'.fixture info'）.toggleClass（'collapsed'）.slideToggle（'fast'）；
});
});
.fixture info{
背景颜色：浅灰色；
显示：无；
}
.细胞{
显示：内联块；
}



七月七日
奈恩县
0
因弗内斯加里东蓟
3.
友好的

开始时间：1930年
....
111.........

7月7日2222
奈恩县
0
因弗内斯加里东蓟
3.
222友好

222开始时间：1930年
....
2222.........
移动


开始时间：1930年
....
.........



里

然后使用类似

var li = document.getElementsByTagName('li');
    li.addEventListener('click', expandFunction);

    function expandFunction() {
      this.classList.add('expanded');
    }

//SCSS
li {
  height: auto;

  .fixture-info {
    height: 0;
    transition: all 0.25s ease-out;
  }

  &.expanded {
    .fixture-info {
      height: 80px; //height value of expanded box
    }
  }
}

如果您不太熟悉
javascript
，这里有一个纯
html+css
解决方案。使用显示/隐藏复选框策略的唯一缺点是必须标记每个标签/输入，这样它们就不必彼此切换（请参见html、toggle1、toggle2等）

除此之外，我建议使用另一个答案中的“toggleClass”jQuery解决方案


ul{
列表样式：无；
利润率：0.20px；
}
ulli{
颜色：#2B91AF；
利润率：0.10px；
}
ul li span a，
ul li span[等级*='-分数']{
颜色：红色；
}
ulli.细胞{
显示：内联块；
}
输入[类型=复选框]，
ul li.设备信息{
显示：无；
}
输入[类型=复选框]：选中+夹具信息{
显示：块；
}


七月七日
奈恩县
0
因弗内斯加里东蓟
3.
友好的
开始时间：1930年
比赛赞助商：。。。。


七月七日
奈恩县
0
因弗内斯加里东蓟
3.
友好的
开始时间：1930年
比赛赞助商：。。。。

不要在“li”标记之间放置任何元素

下面是一种组织HTML的可能方法

<ul>
    <li>
      <div class="cell"><span><a>July 7th</a></span>
        <span>Nairn County</span>
        <span class="h-score">0</span>
        <span>Inverness Caledonian Thistle</span>
        <span class="a-score">3</span>
        <span>Friendly</span>
      </div>

      <ul>
        <li>
          <div class = "fixture-info">
            <div class = "kickoff">Kickoff: <span>1930</span></div>
            <div class = "match-sponsor">....</div>
            .........
          </div>
        </li>
      </ul>
    </li>


    <!--Next Fixture-->
    <li>....</li>
<ul>



七月七日
奈恩县
0
因弗内斯加里东蓟
3.
友好的


开始时间：1930年
....
.........





您是否尝试过
空白：nowrap
？您不应该让div成为ul标签的子标签。只有
li
标记应该是它的“直接子项”。在列表项中移动div并使用javascript显示/隐藏它。
var li = document.getElementsByTagName('li');
    li.addEventListener('click', expandFunction);

    function expandFunction() {
      this.classList.add('expanded');
    }

//SCSS
li {
  height: auto;

  .fixture-info {
    height: 0;
    transition: all 0.25s ease-out;
  }

  &.expanded {
    .fixture-info {
      height: 80px; //height value of expanded box
    }
  }
}

<ul>
    <li>
      <div class="cell"><span><a>July 7th</a></span>
        <span>Nairn County</span>
        <span class="h-score">0</span>
        <span>Inverness Caledonian Thistle</span>
        <span class="a-score">3</span>
        <span>Friendly</span>
      </div>

      <ul>
        <li>
          <div class = "fixture-info">
            <div class = "kickoff">Kickoff: <span>1930</span></div>
            <div class = "match-sponsor">....</div>
            .........
          </div>
        </li>
      </ul>
    </li>


    <!--Next Fixture-->
    <li>....</li>
<ul>