hr rutscht aus p

Hannes Tunk · 30 April 2022

Hallo liebe Community,
ich habe folgendes Problem:

Html-Code:

<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lebenslauf</title>
<link rel="stylesheet" href="TEST.css">
</head>
<body>

<h1>Lebenslauf</h1>
<div class="flexbox-container">

<div class="flexbox-item">
<h2 class="L">Persönliche Daten:</h2>
</div>

<div class="break"></div>

<div class="flexbox-item">

<p class="L">Vorname/Nachname<br>
Adresse<br>
Tel.<br>
E-Mail<br>
<br>
Staatsangehörigkeit<br>
Geburtsdatum<br>
Geschlecht<br>
<hr>
</p>
</div>

<div class="flexbox-item ">
<p class="R">
<strong>1</strong><br>
1<br>
1<br>
[email protected]<br>
<br>
Deutsch<br>
1<br>
Männlich<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<h2 class="L">Schulische Laufbahn</h2>
</div>

<div class="break"></div>

<div class="flexbox-item" >
<p class="L">Grundschule 1<br>
Mittelschule 1<br>
FOS 1<br>
Aktuell<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<p class="R">
2009-2013<br>
2013-2019 Mittlere-Reife Abschluss<br>
2019-2020<br>
1<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<h2 class="L">Praktika</h2>
</div>

<div class="break"></div>

<div class="flexbox-item ">
<p class="L">

EDV-Service<br>
Datum<br>
<br>
Polizei<br>
Datum<br>
<br>
Liebherr<br>
Datum<br>
<hr>
</p>
</div>

<div class="flexbox-item">
<p class="R">
Vom 08.05.2017<br>
Bis 12.05.2017<br>
<br>
Vom 20.02.2017<br>
Bis 24.02.2017<br>
<br>
Vom 23.10.2017<br>
Bis 27.10.2017<br>
<hr>
</p>
</div>

</body>
</html>

CSS-Code:
* {
text-align: center;
}
h1 {
font-size: 500%;
}
.flexbox-container{
display: flex;
flex-wrap: wrap;
}
.flexbox-item {
width: 50%;
height: 100%;
}
.break {
height: 0;
width: 100%;
}
.L{
text-align: right;
margin-right: 15px;
}
.R {
text-align: left;
margin-left: 15px;
}

... und zwar rutscht mir die <hr> immer in die DIV, ich möchte, dass die <hr> nicht den Platz in der Mitte einnimmt.
Die 30px durch den Margin.

Ideen?
Mfg Hannes

ThomasF · 30 April 2022

Hallo Hannes
Der div.flexbox-container ist nicht geschlossen.
Du könntest dem hr einen seitlichen abstand geben so wie Du es den classen .L und .R auch gegeben hast

CSS:

hr { margin: auto 15px; }

Hannes Tunk · 1 Mai 2022

Hey Leute,
danke für die Infos, habe es jetzt mit ner Klasse und nem Margin gemacht.

Gruß und schönen Sonntag

basti1012 · 1 Mai 2022

Das ganze HTML hätte ich schon ganz anders gemacht.
Damit die rechten und linken Angaben überein stimmen( gleiche höhe ), nutzt du <br>, das finde ich fehl an Platz.
Du nutzt doch schon Flexbox , dann mach es doch anders.
<hr> in einen <p> zu nutzen finde ich hier auch unnötig.
Wenn du flexbox hier anders nutzen würdest, könntest du auch einen Border nutzen.
Dann nutzt du leere
<div class="break"></div>
Container , die man eigentlich auch nicht brauch.

Das ist meine Meinung zu deinem Code

hr rutscht aus p

Hannes Tunk

Neues Mitglied

ThomasF

Neues Mitglied

Hannes Tunk

Neues Mitglied

basti1012

Senior HTML'ler

Neueste Beiträge