我遇到了这个问题,我想将两个元素(一个<p>
和一个<button>
)对齐,但是我似乎找不到一种将它们对齐的方法。我已经尝试过使用padding,margin,flex甚至是grid设计,但是似乎没有任何效果。
这是展示问题的图像: Image
这是我最新尝试的代码段:
.line p {
display: inline-block;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>
答案 0 :(得分:0)
使用flexbox实际上很容易。将p标签设为flex元素,然后使用align-items: center;
使它们显示在同一行上。
.line p {
display: flex; /* Change from inline-block to flex */
align-items: center; /* Added to make them appear on the same line */
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>