Question

我试图创建一个像水平滚动的结构的表格。为此，我有一个包装div，它有overflow-x：auto，每行有一个div，每个单元有一个div。

我想将样式应用于行，但样式仅应用于那些可见的元素。

＆＃13;

.inner {
  flex: 1 0 10em;
  height: 2em;
  background-color: green;
}

.outer {
  border-bottom: 10px solid red;
  display: flex; 
}

.box {
  width: 20em;
  overflow-x: scroll;
}

＆＃13;

<div class="box">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</div>

＆＃13;

我希望所有绿色框都有一个红色底边框，但边框只显示在那些没有溢出的项目上。我错过了什么？

Answer 1

您可以尝试这样做：

＆＃13;

.inner {
  flex: 1 0 10em;
  width:10em; /*Specify a width */
  height: 2em;
  background-color: green;
}

.outer {
  border-bottom: 10px solid red;
  display: inline-flex; /* to take the width of content and not container*/
}

.box {
  width: 20em;
  overflow-x: scroll;
}

＆＃13;

<div class="box">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</div>

＆＃13;

Answer 2

我不确切地知道你的意思，但我希望这会有所帮助：由于你只使用外部的CSS，它就是这样，只把它放在可见的部分。要为所有这些实现底部红色边框，您必须将边框放在内部。

HTML：

<div class="box">
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>
</div>

CSS：

.inner {
  flex: 1 0 10em;
  height: 2em;
  background-color: green;
  border-bottom: 10px solid red;
}

.outer {
  width: 20em;
  display: flex; 
}

.box {
  width: 20em;
  overflow-x: scroll;

}

希望有所帮助：）

div的溢出区域没有样式

2 个答案: