1

这就是我要的。 这就是我得到的。

这是我的代码。我的间距有问题。我似乎无法将 p 标签与 br 标签对齐。我也尝试过内联但没有运气。

<p class="one"><b>Field of</b> Select all that apply, hold CTRL when clicking to select multiple items <br>
  <b>study: </b></p><!-- This is where the issue lies. -->

4

3 回答 3

0


让我们简单点，

用于float: right正确对齐“学习”。就是这样！

这是你的代码： 

.one {
  width: 55px;
  height: 50px;
}

.span {
  float: right;
}
<b>Field of</b>&nbsp;&nbsp;&nbsp;Select all that apply; hold CTRL when clicking to select multiple items
<p class="one">
  <b><span class="span">Study:</span></b>
</p>



代码笔：https://codepen.io/marchmello/pen/abOPJzp?editors=1100

于 2020-03-27T19:00:16.070 回答
0

您应该有 2 个容器，左粗体文本应该在具有某些样式的左容器中。没有什么好的方法可以修复你的代码来解决你的问题，对我来说重写它更容易。

用于padding文本之间的距离和text-align:right;第二行更靠近边界。看一看：

.main_text {
   padding-left:5px;
}

.left_text {
  text-align: right;
}
<div style="display:flex">
   <div class='left_text'>
      <b>Field of <br> study: </b>
   </div>
   <div class='main_text'>
      <label> Select all that apply, hold CTRL when clicking to select multiple items</label>
   </div>
</div>

于 2020-03-27T18:42:09.327 回答
0

Flexbox 非常适合这种放置方式。使用 align-items:center 进行第一次定位

div{
display:flex;
align-items:center;
font-size:19px;
}

#a1{
display:block;
margin-right:14px;
width:64px;
}
<div>
<p id='a1' ><b>Field of <br/>Study </b></p>
<p>Select all that apply, hold CTRL when clicking to select multiple items </p>
</div>

或使用 align-items:flex-start 如果您想要这样的放置：

div{
display:flex;
align-items:flex-start;
font-size:19px;
}

#a1{
display:block;
margin-right:14px;
width:64px;
}
<div>
<p id='a1' ><b>Field of <br/>Study </b></p>
<p>Select all that apply, hold CTRL when clicking to select multiple items </p>
</div>

于 2020-03-27T19:26:58.340 回答