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