我正在尝试的是,“您的隐私”,描述和按钮应该在同一行对齐。
HTML:
<div class="cookie-notice">
<div class="cn-body">
<h2 id="title">Your Privacy</h2>
<p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p>
<div class="cn-ok">
<a href="#" class="cm-link cn-learn-more">Decline</a>
<div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div>
</div>
</div>
</div>
CSS:
.cn-body {
display: flex;
flex-direction: column;
font-family: myriad-pro, sans-serif;
gap: 0;
padding: 0;
width: 100%;
padding: 40px 113px;
boder: 1px solid red;
margin: 10px;
}
.cm-btn-danger {
display: none;
}
.cn-ok {
align-items: center;
display: flex;
flex-direction: row-reverse;
gap: 10px;
justify-content: end;
margin-top: 20px
}
这是代码:代码
我们可以使用
justify-content: start
来对齐按钮!
.cn-body {
display: flex;
flex-direction: column;
font-family: myriad-pro, sans-serif;
gap: 0;
padding: 0;
width: 100%;
padding: 40px 113px;
boder: 1px solid red;
margin: 10px;
}
.cm-btn-danger {
display: none;
}
.cn-ok {
align-items: center;
display: flex;
flex-direction: row-reverse;
gap: 10px;
justify-content: start;
margin-top: 20px
}
<div class="cookie-notice">
<div class="cn-body">
<h2 id="title">Your Privacy</h2>
<p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span>
</p>
<div class="cn-ok">
<a href="#" class="cm-link cn-learn-more">Decline</a>
<div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div>
</div>
</div>
</div>
您可以在
align-items: flex-start
上添加 .cn-body
,这样就可以了。
.cn-body {
display: flex;
flex-direction: column;
font-family: myriad-pro, sans-serif;
gap: 0;
padding: 0;
width: 100%;
padding: 40px 113px;
boder: 1px solid red;
margin: 10px;
align-items:flex-start;
}
.cm-btn-danger {
display: none;
}
.cn-ok {
align-items: center;
display: flex;
flex-direction: row-reverse;
gap: 10px;
justify-content: end;
margin-top: 20px
}
<div class="cookie-notice">
<div class="cn-body">
<h2 id="title">Your Privacy</h2>
<p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p>
<div class="cn-ok">
<a href="#" class="cm-link cn-learn-more">Manage Preferences</a>
<div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div>
</div>
</div>
</div>