Question

我正在创建一个跨越50％页面的部分。在该部分中，我想放置一个包含两行的文本框，这些行将与列表中的项目符号点一起排在右侧。如果嵌套div，为什么不把盒子放在主要部分？

<div class="content">
        <h2>Brigham Young University</h2>
        <h3><span>Computer Engineering, Minor in Computer Science</span></h3>
        <ul>
            <li>3.36 GPA</li>
            <li>4.0 STEM GPA</li>
        </ul>
        <div id="grad_date">
            <p>Provo, UT <br>
                Expected 2018</p>
        </div>
    </div>

Css：

.content {
    border-width: 3px;
    border-style: solid;
    border-color: black;
    margin-left: 15px;
    margin-right: 15px;
    width: 50%;
}

.content #grad_date {
    border-width: 2px;
    border-color: red;
    border-style: solid;
    width: 100px;
    float: right;
}

Answer 1

将display: inline-block;添加到.content：

JS Fiddle

Answer 2

您需要将无序列表的显示规则更改为inline-block。

还要确保通过将overflow: hidden添加到.container div来清除浮动。这是一种方法。

＆＃13;

.content {
  border-width: 3px;
  border-style: solid;
  border-color: black;
  margin-left: 15px;
  margin-right: 15px;
  width: 50%;
  overflow: hidden;
}

.content ul {
  display: inline-block;
}

.content #grad_date {
  border-width: 2px;
  border-color: red;
  border-style: solid;
  width: 100px;
  float: right;
}

＆＃13;

<div class="content">
  <h2>Brigham Young University</h2>
  <h3><span>Computer Engineering, Minor in Computer Science</span></h3>
  <ul>
    <li>3.36 GPA</li>
    <li>4.0 STEM GPA</li>
  </ul>
  <div id="grad_date">
    <p>Provo, UT <br />
      Expected 2018</p>
  </div>
</div>

＆＃13;

嵌套的div不会在框内创建一个框？

2 个答案: