Question

我是CSS的新手，请原谅这个基本问题，

我正在尝试开发类似的用户界面，如下图所示

这是我的代码

<div class="container">
  <div class="marquee-sibling">Indices </div>
  <div class="marquee">
    <ul class="marquee-content-items">

      <li><span>NASDAQ</span><br>
      <span>4655.92</span>
      <span>17.93</span>
      <span>0.39%</span>
      </li>

      <li><span>DJIA</span><br>
      <span>16414.39</span>
      <span>15.82</span>
      <span>0.1%</span>
      </li>

    </ul>
  </div>
</div>

但是，请你告诉我为什么只有第一个跨度是可见的而其他的是隐藏的？

http://jsfiddle.net/Wf43X/319/

Answer 1

我尝试过这样的事情......

<div class="container">
  <div class="marquee-sibling"> </div>
  <div class="marquee">
    <span class="ind-cont">
        <span class="ind-name txtcolor ">NASDAQ</span>
    <span Class="capital txtcolor">4655.92</span>
    <span class="one-share txtcolorb">17.93</span>
    <span class="per txtcolorb floatright">0.39%</span>
    </span>
    <span class="ind-cont">
        <span class="ind-name txtcolor ">DJIA</span>
    <span Class="capital txtcolor">16414.39</span>
    <span class="one-share txtcolorb">15.82</span>
    <span class="per txtcolorb floatright">0.1%</span>
    </span>

  </div>
</div>

BridgeOptions options = new BridgeOptions()
.addInboundPermitted(new PermittedOptions().setAddress("news-feed"))
.addOutboundPermitted(new PermittedOptions().setAddress("news-feed"));

Answer 2

你在第一个跨度之后断了一行，这段代码隐藏在第一行之后的任何内容：

.container {
    overflow: hidden;
    height: 45px;
}

Answer 3

您可以使用 Flexbox

执行此操作

＆＃13;

ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  background: black;
  color: white;
  border: 1px solid white;
  paddgin: 10px;
}

li span {
  flex: 50%;
  padding: 5px;
  box-sizing: border-box;
}

li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
  text-align: right;
} 

li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
  font-size: 16px;
  font-weight: bold;
} 

li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
  font-size: 14px;
  color: #aaa;
}

＆＃13;

<div class="container">
  <div class="marquee-sibling">Indices </div>
  <div class="marquee">
    <ul class="marquee-content-items">

      <li>
        <span>NASDAQ</span>
        <span>4655.92</span>
        <span>17.93</span>
        <span>0.39%</span>
      </li>

      <li>
        <span>DJIA</span>
        <span>16414.39</span>
        <span>15.82</span>
        <span>0.1%</span>
      </li>

    </ul>
  </div>
</div>

＆＃13;

Answer 4

我也认为flexbox的想法是最好的，但是如果你仍想继续使用你的代码，我认为你应该尝试在你的CSS中改变.container的大小。你将能够看到你的其他所有人。元件。文本为白色，运行代码时无法真正看到它，因为背景为白色。

为什么只有第一个跨度可见而其他跨度被隐藏

4 个答案: