我是CSS的新手,目前正在尝试将屏幕分为两部分,并在左侧和右侧放置文本。但是,由于某种原因,右侧的“框”不能覆盖屏幕的整个右侧,仅像200-300像素...

JSFiddle:
https://jsfiddle.net/19mw8hzL/

黑色文本应到达屏幕的右侧。

<div class="wrapper">
  <div id="one">
    <p class="w-text-1">Strategy</p>
  </div>
  <div id="two">
    <ul>
      <li><a href="#">Visioning</a></li>
      <li><a href="#">Strategic Analysis</a></li>
      <li><a href="#">Strategy Formulation</a></li>
      <li><a href="#">Business Model Innovation</a></li>
      <li><a href="#">Financial Modeling</a></li>
     </ul>
  </div>
</div>

最佳答案

Flexbox可以做到这一点。



.w-text-1 {
  font-family: 'Garamond', serif;
  color: rgba(163, 42, 46, 1);
  font-size: 35px;
}
.wrapper {
  display: flex;
}
.wrapper div {
  color: #fff;
}
#one {
  width: 20%;
}
#two {
  flex: 1;
  background: lightblue;
  text-align: right;
}
#two a {
  text-decoration: none;
  font-family: 'Gotham', sans-serif;
  font-size: 17px;
  color: #000;
  border: 1px solid grey;
}
#two ul {
  overflow: hidden;
  padding: 0;
}
#two li {
  display: inline-block;
  margin: 5px 0 0 0;
}

<div class="wrapper">
  <div id="one">
    <p class="w-text-1">Strategy</p>
  </div>
  <div id="two">
    <ul>
      <li><a href="#">Visioning</a>
      </li>
      <li><a href="#">Strategic Analysis</a>
      </li>
      <li><a href="#">Strategy Formulation</a>
      </li>
      <li><a href="#">Business Model Innovation</a>
      </li>
      <li><a href="#">Financial Modeling</a>
      </li>
    </ul>
  </div>
</div>

09-10 10:51
查看更多