Question

请参阅我的codepen：http://codepen.io/Chiz/pen/zBWzZB

我希望UL列表位于左侧的白色区域内，但出于某种原因，当我添加UL时，它似乎远离白色区域。

但是，当我删除UL标签时，它看起来不错。

*
{
  box-sizing:border-box;
}

body
{
background: linear-gradient(to right,  #f4f4f4 0%,#848484 80%);
}

.container
{
  width:100%;
  height:100vh;
  position:relative;
}

.card
{
  width:70%;
  height:500px;
  background-color:rgb(250,250,250);
  padding:0;
  position:absolute;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  transform:translateY(-50%);
}

.card .left
{
  width:70%;
  height:100%;
  background-color:rgb(250,250,250);
  display:inline-block;
  padding:0;
  margin:0;
}

.card .left .leftcontentbox
{
  width:75%;
  height:90%;
  border:1px solid red;
  margin:0 auto;
}

.card .left .leftcontentbox .topnav
{
  width:100%;
  border:1px solid black;
}

.topnav ul li
{
  display:inline-block;
}

.card .right
{
  width:29.55%;
  height:100%;
  background-color:#b6e6f2;
  display:inline-block;
  padding:0;
  margin:0;
}

<div class="container">
  <div class="card">
    <div class="left">
      <div class="leftcontentbox">
        <div class="topnav">
          <img src=""></src>
          <ul>
            <li>Articles</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </div>

        <div class="headertext">

        </div>

        <div class="latestarticles">

        </div>

      </div>
    </div>


    <div class="right">
    </div>
  </div>
</div>

Answer 1

display:inline-block将float:left更改为.card .left，float:right将.card .right更改为<{1}}。

由于我们在float和.left上使用了.right。我们需要通过将.fixit类添加到.card的父类（.left）和.right

来重置浮动

注意：.fixit类代码也包含在CSS

中

 .fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}

*
{
  box-sizing:border-box;
}

   .fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;}
.fixit{display:inline-block;clear:both;}
* html .fixit{height:1%;}
.fixit{display:block;}

body
{
background: linear-gradient(to right,  #f4f4f4 0%,#848484 80%);
}

.container
{
  width:100%;
  height:100vh;
  position:relative;
}

.card
{
  width:70%;
  height:500px;
  background-color:rgb(250,250,250);
  padding:0;
  position:absolute;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  transform:translateY(-50%);
}

.card .left
{
  width:70%;
  height:100%;
  background-color:rgb(250,250,250);
  float:left;
  padding:0;
  margin:0;
}

.card .left .leftcontentbox
{
  width:75%;
  height:90%;
  border:1px solid red;
  margin:0 auto;
}

.card .left .leftcontentbox .topnav
{
  width:100%;
  border:1px solid black;
}

.topnav ul li
{
  display:inline-block;
}

.card .right
{
  width:29.55%;
  height:100%;
  background-color:#b6e6f2;
  float:right;
  padding:0;
  margin:0;
}

<div class="container">
  <div class="card fixit">
    <div class="left">
      <div class="leftcontentbox">
        <div class="topnav">
          <img src=""></src>
          <ul>
            <li>Articles</li>
            <li>About</li>
            <li>Contact</li>
          </ul>
        </div>

        <div class="headertext">

        </div>

        <div class="latestarticles">

        </div>

      </div>
    </div>


    <div class="right">
    </div>
  </div>
</div>

Answer 2

在左侧卡片类中添加一个浮动，向右侧卡片类添加一个浮动，这是我做的：

{
  box-sizing:border-box;
}

body
{
background: linear-gradient(to right,  #f4f4f4 0%,#848484 80%);
}

.container
{
  width:100%;
  height:100vh;
  position:relative;
}

.card
{
  width:70%;
  height:500px;
  background-color:rgb(250,250,250);
  padding:0;
  position:absolute;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  transform:translateY(-50%);
}

.card .left
{
  width:70%;
  height:100%;
  background-color:rgb(250,250,250);
  display:inline-block;
  padding:0;
  margin:0;
  float: left;
}

.card .left .leftcontentbox
{
  width:75%;
  height:90%;
  border:1px solid red;
  margin:0 auto;
}

.card .left .leftcontentbox .topnav
{
  width:100%;
  border:1px solid black;
}

.topnav ul li
{
  display:inline-block;
}

.card .right
{
  width:29.55%;
  height:100%;
  background-color:#b6e6f2;
  display:inline-block;
  padding:0;
  margin:0;
  float : right;
}

内容远远超出了盒子区域

2 个答案: