Inhalt des Menüs nicht ordnungsgemäß ausgerichtet ⇐ CSS

[Anonymous]

Der Inhalt im Menü ist nicht ordnungsgemäß ausgerichtet. Das Hamburger -Menüsymbol befindet sich unter dem Text "Menü" und ist in der Mitte ausgerichtet. Der "Menü" -Text ist links. Die Linie, mit der das Menü aus dem Inhalt teilt, sitzt zu niedrig. Die Idee ist, dass das Menü die gleiche Breite ist wie das Logo und nach dem Klicken auf das Menü nicht nur heruntergeklickt, sondern auch hinter dem Logo, das das Menü und das Logo aussehen < /p>


snippet-cods lang-overRid "

Code: Select all

.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 1.5px 5.4px rgba(0, 0, 0, 0.054),
0px 3.7px 10.9px rgba(0, 0, 0, 0.068),
0px 7px 16.8px rgba(0, 0, 0, 0.074),
0px 12.5px 24.6px rgba(0, 0, 0, 0.076),
0px 23.4px 38.1px rgba(0, 0, 0, 0.08),
0px 56px 80px rgba(0, 0, 0, 0.1);
height: 176px;
/* margin-top: 20px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;*/
transition: height 400ms;
-webkit-tap-highlight-color: #00000010;
}

.card.active {
height: 400px;
}

.title {
font-family: sans-serif;
font-size: 18px;
margin-top: 8px;
user-select: none;
-webkit-user-select: none;
}

.row {
align-items: flex-start;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer;
display: flex;
justify-content: space-between;
padding: 15px 20px;
margin: 0px;
transition: height 400ms;
min-width: 370px;
}

.icon {
fill: none;
stroke: #000;
stroke-width: 12;
stroke-linecap: square;
stroke-linejoin: round;
margin-left: 0px;
}

.menu-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 20px;
}

.menu-content p {
font-size: 16px;
color: #333;
text-align: center;
}< /code>

[img]images/85883851-3590-4a02-96c5-c667df8313d5.png[/img]


MENU