html - CSS对齐元素的重叠文本
问题描述
以下是我正在处理的CSS和HTML代码，但由于某些原因，所有文本都相互重叠（位置不正确）。我不知道我在写这段代码时做错了什么。我认为这可能是由于此菜单项的对齐而发生的。感谢您提前帮助我。
body {
overflow: hidden;
background: linear-gradient(to right, #fc354c, #0abfbc);
}
.menu-toggler {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.menu-toggler:hover+label,
.menu-toggler:hover+label:before,
.menu-toggler:hover+label:after {
background: white;
}
.menu-toggler:checked+label {
background: transparent;
}
.menu-toggler:checked+label:before,
.menu-toggler:checked+label:after {
top: 0;
width: 40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked+label:before {
transform: rotate(45deg);
}
.menu-toggler:checked+label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked~ul .menu-item {
opacity: 1;
}
.menu-toggler:checked~ul .menu-item:nth-child(1) {
transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(2) {
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(3) {
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(4) {
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(5) {
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(6) {
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item a {
pointer-events: auto;
}
.menu-toggler+label {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.menu-toggler+label:before,
.menu-toggler+label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
content: "";
position: absolute;
left: 0;
}
.menu-toggler+label:before {
top: 10px;
}
.menu-toggler+label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
transform: rotate(-300deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 80px;
height: 80px;
display: block;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
display: block;
width: 520px;
height: 60px;
font-family: Courgette;
line-height: 60px;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.2);
border-radius: 38px;
text-align: center;
text-decoration: none;
font-size: 30px;
pointer-events: none;
transition: 0.2s;
}
.menu-item a:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
color: white;
background: rgba(255, 255, 255, 0.3);
font-size: 34.4444444444px;
}<body translate="no">
<nav class="menu">
<input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
<label for="menu-toggler"></label>
<ul>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
</ul>
</nav>
</body>我想要的输出是这样的：
解决方案
文本框太大，没有足够的空间展开，所以会重叠。您可以尝试通过设置使其更大：
.menu-item {
width: 300px;
height: 560px;
}
工作示例：
body {
overflow: hidden;
background: linear-gradient(to right, #fc354c, #0abfbc);
}
.menu-toggler {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.menu-toggler:hover+label,
.menu-toggler:hover+label:before,
.menu-toggler:hover+label:after {
background: white;
}
.menu-toggler:checked+label {
background: transparent;
}
.menu-toggler:checked+label:before,
.menu-toggler:checked+label:after {
top: 0;
width: 40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked+label:before {
transform: rotate(45deg);
}
.menu-toggler:checked+label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked~ul .menu-item {
opacity: 1;
}
.menu-toggler:checked~ul .menu-item:nth-child(1) {
transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(2) {
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(3) {
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(4) {
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(5) {
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(6) {
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item a {
pointer-events: auto;
}
.menu-toggler+label {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.menu-toggler+label:before,
.menu-toggler+label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
content: "";
position: absolute;
left: 0;
}
.menu-toggler+label:before {
top: 10px;
}
.menu-toggler+label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
transform: rotate(-300deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 300px;
height: 700px;
display: block;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
display: block;
width: 520px;
height: 60px;
font-family: Courgette;
line-height: 60px;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.2);
border-radius: 38px;
text-align: center;
text-decoration: none;
font-size: 30px;
pointer-events: none;
transition: 0.2s;
}
.menu-item a:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
color: white;
background: rgba(255, 255, 255, 0.3);
font-size: 34.4444444444px;
}<body translate="no">
<nav class="menu">
<input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
<label for="menu-toggler"></label>
<ul>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
</ul>
</nav>
</body>如果您可以更改各个选项的宽度和高度，它可能看起来会更好。
body {
overflow: hidden;
background: linear-gradient(to right, #fc354c, #0abfbc);
}
.menu-toggler {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.menu-toggler:hover+label,
.menu-toggler:hover+label:before,
.menu-toggler:hover+label:after {
background: white;
}
.menu-toggler:checked+label {
background: transparent;
}
.menu-toggler:checked+label:before,
.menu-toggler:checked+label:after {
top: 0;
width: 40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked+label:before {
transform: rotate(45deg);
}
.menu-toggler:checked+label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked~ul .menu-item {
opacity: 1;
}
.menu-toggler:checked~ul .menu-item:nth-child(1) {
transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(2) {
transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(3) {
transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(4) {
transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(5) {
transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item:nth-child(6) {
transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked~ul .menu-item a {
pointer-events: auto;
}
.menu-toggler+label {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.menu-toggler+label:before,
.menu-toggler+label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(255, 255, 255, 0.7);
transition: transform 0.5s, top 0.5s;
content: "";
position: absolute;
left: 0;
}
.menu-toggler+label:before {
top: 10px;
}
.menu-toggler+label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
transform: rotate(-300deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 250px;
height: 225px;
display: block;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
display: block;
width: 200px;
height: 60px;
font-family: Courgette;
line-height: 60px;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.2);
border-radius: 38px;
text-align: center;
text-decoration: none;
font-size: 30px;
pointer-events: none;
transition: 0.2s;
}
.menu-item a:hover {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
color: white;
background: rgba(255, 255, 255, 0.3);
font-size: 34.4444444444px;
}<body translate="no">
<nav class="menu">
<input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
<label for="menu-toggler"></label>
<ul>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
<li class="menu-item">
<a target="_blank">Company Goal</a>
</li>
</ul>
</nav>
</body>推荐阅读
- python - Python selenium 无法在 iframe 中定位元素
- python - 多处理和列表 python
- excel - 为什么 RemoveDuplicates 代码会使顶部单元格重复？
- java - Apache POI 版本 4.1.2 在 Android Studio 中构建失败
- javascript - 如何在cropperjs中设置最大裁剪框大小？
- html - ::first-letter伪元素的首字母属性不起作用
- lua - 为什么这个协程会停止主线程？
- python-3.x - 无法在 python 可执行文件中执行 VBoxManage 命令（使用 pyinstaller 创建）
- macos - 是否可以在 Mac OS X 中使用 mac_policy_ops 隐藏 vnode
- android - Android Studio 角半径/高程和阴影颜色