大家好,我在编写代码行时很费力,我可以分割文本,到目前为止,这是我的代码:





.partthree {
  display: flex;
  flex-wrap: wrap;
  margin: 0 90px;
  color: aliceblue;
}
.partthree div {
  display: inline-block;
  flex-grow: 1;
  font-family: gotham light;
  font-size: 23px;
}

<div class="partthree">
  <div class="txt1">
    <p>You pick which practice areas you want</p>
  </div>
  <div class="txt2">
    <p>You pick your area by county</p>
  </div>
  <div class="txt3">
    <p>You pick how many leads you want</p>
  </div>
</div>

最佳答案

如果需要,可以使用flex-wrap:wrap;或通过mediaquerie插入小屏幕。

您还可以使用以下方法调整孩子的布局:


marginpadding
min-widthmax-width
....否则适合您的需求




.partthree {
  display: flex;
  margin: 0 90px;
  color: aliceblue;
}
.partthree div {
  display: inline-block;
  flex-grow: 1;/* flex:1; would make them equal width */
  font-family: gotham light;
  font-size: 23px;
  /* extra ?*/
  margin: 0 0.5em;
  border:solid;
  text-align:center;
}

body {
background:#555
}
p {
  margin:0;

<div class="partthree">
  <div class="txt1">
    <p>You pick which practice areas you want</p>
  </div>
  <div class="txt2">
    <p>You pick your area by county</p>
  </div>
  <div class="txt3">
    <p>You pick how many leads you want</p>
  </div>
</div>

关于html - 如何使用CSS在一行中拆分文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41966789/

10-11 23:24
查看更多