Question

在此代码中：https://codepen.io/anon/pen/GGrVdK

我无法将类foul-row的div的高度降低到4px高度，因为每个foul div都是4px高。

   .foul{
      background: linear-gradient(to bottom right, rgb(0,0,0), rgb(92,92,92));
      height: 4px;
      margin-top:0;
      margin-bottom: 0;
      margin-right: 2px;
      width: 15px;
      display: inline-block;
    }

如果我尝试将高度设置为foul-row类，则我在包含cell div中的滚动条，或者我看不到foul div。

这里有cell类

.cell{
  padding: 6px 8px 0 8px;
  white-space: nowrap;
  font-size: 13px;
  min-width: 27px;
  display: block;
  overflow: auto;
  height: 36px; /*I would like to remove this, but if I do, I have visualization problems*/      
}

这就是“有罪”细胞的结构

     <div class="cell white">
        <div>Home Team</div>
        <div class="foul-row">
          <div class="foul"></div><div class="foul"></div><div class="foul">/div><div class="foul"></div><div class="foul"></div>
        </div>
      </div>

如何减少foul-row高度以适应foul高度并减少cell div的总高度？感谢

Answer 1

您的height:4px被字体大小覆盖，默认为16px，因为它需要有空间让文字显示出来。

由于div.foul没有任何文字，因此可以将其字体设置为0。

body {
  font-family: 'Fjalla One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /*   background-image: url(https://dynamitick.com/wp-content/uploads/2018/01/legnano-basket-19-sempione-news.jpg); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.red {
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
}

.blue {
  background-color: rgba(0, 0, 255, 0.7);
  color: white
}

.black {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.green {
  background-color: rgba(0, 128, 0, 0.7);
  color: white;
}

.yellow {
  background-color: rgba(255, 255, 0, 0.7);
  color: blue;
}

.white {
  background-color: rgba(255, 255, 255, 0.7);
  color: blue;
}

.grey {
  background-color: rgba(128, 128, 128, 0.7);
  color: white;
}

.score {
  text-align: right;
}

.cell {
  padding: 6px 8px 0 8px;
  /*   display: inline-flex; */
  /*    overflow: auto; */
  white-space: nowrap;
  font-size: 13px;
  min-width: 27px;
  /*   min-height: 16px; */
  display: block;
  overflow: auto;
  height: 36px;
  /*   text-overflow: ellipsis */
}

.shadow {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
}

.column {
  display: inline-block;
  height: 100%;
}

.separator {
  display: inline-block;
  width: 1px;
}

.timer {
  /*   width: 60px; */
  text-align: center;
}

.container {
  border-radius: 10px;
  overflow: hidden;
  display: table;
  clear: both;
  font-size: 0;
  animation-name: rotation;
  animation-duration: 1s;
  border: 1px solid grey;
}

@keyframes rotation {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

.bottom-left {
  position: absolute;
  bottom: 3vh;
  left: 2vh;
}

.bottom-right {
  position: absolute;
  bottom: 3vh;
  right: 2vh;
}

.top-right {
  position: absolute;
  top: 3vh;
  right: 2vh;
}

.top-left {
  position: absolute;
  top: 3vh;
  left: 2vh;
}

.message-title {
  text-align: center;
}

.message-body {
  text-align: center;
  min-width: 150px;
  background-color: rgba(0, 0, 0, 0.66);
  color: white;
  text-transform: none
}

.half-shadow-up {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(128, 128, 128, 1));
}

.tv-logo img {
  max-width: 150px;
  max-height: 150px;
  margin: auto;
}

.foul {
  background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(92, 92, 92));
  height: 4px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0;
  margin-right: 2px;
  width: 15px;
  display: inline-block;
}

.foul-row {
  height: 4px;
}

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div class="container shadow top-right">
  <div class="column timer">
    <div class="cell red"><span>00:00</span></div>
    <div class="cell red">Q4</div>
  </div>
  <div class="separator"></div>
  <div class="column">
    <div class="cell white">
      <div>Home Team</div>
      <div class="foul-row">
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
      </div>
    </div>
    <div class="cell green">
      <div>Guest team</div>
      <div class="foul-row">
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
        <div class="foul"></div>
      </div>
    </div>
  </div>
  <div class="separator"></div>
  <div class="column score">
    <div class="cell white">
      100
    </div>
    <div class="cell green">
      65
    </div>
  </div>
</div>
<div class="container bottom-left">
  <div class="column">
    <div class="cell white half-shadow-up message-title">
      10 A. Player
    </div>
    <div class="cell message-body">
      24 pts, 8 reb
    </div>
  </div>
</div>

Answer 2

将private int Two; private int Three; private int sum; public Form1() { this.Two = 0; this.Three = 0; this.sum = 0; InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { // MessageBox.Show("Enter the teams` name"); } private void button1_Click(object sender, EventArgs e) { this.Three += 3; sum = textBox3.Text != String.Empty ? Convert.ToInt32(textBox3.Text) : 0; textBox3.Text = Convert.ToString(sum + this.Three); } ... same for number Two private void textBox3_TextChanged(object sender, EventArgs e) { textBox3.Text = "0"; }元素的height:4px属性更改为foul-row后，请尝试将overflow添加到cell：

hidden

没有可视化问题，无法降低div高度

2 个答案: