表格下方的文字

Question

文字不会进入桌面。这是div的问题吗？我没有找到这个问题的答案。

这是CSS和HTML代码：

＆＃13;

＆＃13;

.subtype {
  border: 2px solid #c6c6c6;
  background-color: white;
  width: 250px;
  height: 30px;
  text-align: top;
}

ol {
  padding: 0;
  list-style-type: none;
  font-size: 15px;
  height: 20px;
  line-height: 200%;
}

＆＃13;

<div class="content">
  <div class="submit">What would you like to submit?</br>
    </br>
    <ul>
      <li>Submission Type *</li>
    </ul>
    </br>
    <div class="subtype">
      <ol>
        <div class="arrows">
          <i class="icon-arrow-combo"></i>
        </div>
        <li><a href="#">Brand and Marketing</a>
          <ul>
            <li><a href="#">Sample Submit2</a></li>
            <li><a href="#">Sample Submit3</a></li>
            <li><a href="#">Sample Submit4</a></li>
          </ul>
        </li>

      </ol>

    </div>
    <ul>
      </br>
      <li>Choose one of the following options *</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

.subtype {
    min-height: 30px; /*/height change to min-height/*/
    //more code...
}

ol {
    height: 20px; /*/remove this/*/
    //more code...
}

＆＃13;

＆＃13;

.subtype {
  border: 2px solid #c6c6c6;
  background-color: white;
  width: 250px;
  min-height: 30px;
  text-align: top;
}

ol {
  padding: 0;
  list-style-type: none;
  font-size: 15px;
  line-height: 200%;
}

＆＃13;

<div class="subtype">
  <ol>
    <div class="arrows">
      <i class="icon-arrow-combo"></i>
    </div>
    <li><a href="#">Brand and Marketing</a>
      <ul>
        <li><a href="#">Sample Submit2</a></li>
        <li><a href="#">Sample Submit3</a></li>
        <li><a href="#">Sample Submit4</a></li>
      </ul>
    </li>
  </ol>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该删除这些元素上的height: 30px，如果您希望文本适合表格，则可以设置height: auto。

＆＃13;

＆＃13;

.subtype {
  border: 2px solid #c6c6c6;
  background-color: white;
  width: 250px;
  height: auto;
  text-align: top;
}

ol {
  padding: 0;
  list-style-type: none;
  font-size: 15px;
  height: auto;
  line-height: 200%;
}

＆＃13;

<div class="subtype">
  <ol>
    <div class="arrows">
      <i class="icon-arrow-combo"></i>
    </div>
    <li><a href="#">Brand and Marketing</a>
      <ul>
        <li><a href="#">Sample Submit2</a></li>
        <li><a href="#">Sample Submit3</a></li>
        <li><a href="#">Sample Submit4</a></li>
      </ul>
    </li>
  </ol>
</div>

＆＃13;

＆＃13;

＆＃13;