CSS：增加列表项的宽度

我是css新手，目前正在尝试将屏幕分成两部分，并将文本放在左侧和右侧。然而，由于某些原因，右边的“盒子”并没有覆盖整个屏幕的右边部分，只有200-300像素

JSFiddle：

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

<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>

战略

更改

#two

的css，以添加

#one

的

20%

，使其达到100%：

#two {
    float: left;
    overflow: hidden;
    width: 76%; /* this is completing the width with the 4% padding */
    padding-top: 17px;
    padding-right: 4%;
}

嗨，请修改这些

让我们将父元素设置为100%，子元素div设置为50%

.wrapper { 
   width : 100%;
}

#one {
  float:left; 
  width:50%;
}

宽度为46%，因为我们已将填充正确设置为4%（46+4=50）

：）

Flexbox可以做到这一点

.w-text-1{
字体系列：“Garamond”，衬线；
颜色：rgba（163,42,46,1）；
字体大小：35px；
}
.包装纸{
显示器：flex；
}
.包装部{
颜色：#fff；
}
#一个{
宽度：20%；
}
#两个{
弹性：1；
背景：浅蓝色；
文本对齐：右对齐；
}
#两个a{
文字装饰：无；
字体系列：“Gotham”，无衬线；
字号：17px；
颜色：#000；
边框：1px纯灰；
}
#两个ul{
溢出：隐藏；
填充：0；
}
#两里{
显示：内联块；
保证金：5px0；
}

战略

这将删除作为所有元素宽度一部分的填充。不要使用“*”作为选择器，因为它对DOM的影响很大

#two {
  width: 80%;
}

因为20%+80%=100%

#two li {
    display: inline-block;
}

---

这将为li的

@MrLister添加一个宽度和一个高度。不，这不起作用，OP想要全宽，而不是自动向右浮动宽度。在第四个列表项之前强制换行已确保不会使用#2的整个宽度。根据链接示例中的css，我猜{display:block；content:'.}之前的两行

#two li:nth child（4）:{display:block；content:'.}负责包装文本，因此不会占用整个宽度。删除它并为容器指定宽度可能会解决此问题。。。假设你的意思是从左到右（而不是从上到下）。
#two {
  width: 80%;
}

#two li {
    display: inline-block;
}