Float "Bearbeiten" -Link rechts vom Übergang (muss weiterhin mit Tagblock gehalten werden)

StackOverflow https://stackoverflow.com/questions/1574283

  •  21-09-2019
  •  | 
  •  

Frage

Angesichts der folgenden HTML

<div class="module">           
            <div class="header">
                <h1>Test Heading</h1>
                <a href="">edit</a>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
            </div>
        </div>

und das folgende CSS

body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
            h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }

            .module { }
                .module .header h1 { }
                .module .header a { }

Es fällt mir schwer, herauszufinden, wie man den Link "Bearbeiten" rechts vom H1-Tag schwebt, aber das H1-Tag als Blockelement so hält, dass es unterstreicht (Border-Bottom), so (Border-Bottom).

Kann mir jemand einen Rat anbieten? Danke im Voraus

War es hilfreich?

Lösung

Es gibt verschiedene Strategien, um dies zu erreichen. Sie können entweder einen Container schweben, um einen Schwimmer zu reparieren, oder generierten Inhalte zum Löschen eines Floats verwenden. Ich werde versuchen, beide W/ Code zu erklären. Für beide können Sie Ihr Markup behalten, müssen jedoch die Untersteuerung vom H1 in die .header -Klasse verschieben. Schwimmen Sie dann den Header nach links, bearbeiten Sie nach rechts und reparieren Sie die Schwimmer, indem Sie auch die .header -Klasse schweben. Diese Technik hat den Nachteil, je nachdem, was danach kommt, aber für Ihr isoliertes Stück Code funktioniert:

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }

Die wichtigere Lösung ist die Verwendung von CSS-generierten Inhalten, um die gegnerischen Schwimmkörper zu löschen, anstatt den .header-Container zu schweben. Beachten Sie jedoch, dass dies bei weniger CSS -fähigen Browserversionen Probleme verursacht.

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }

Weitere Informationen zur ersten Methode finden Sie in Eric Meyers Artikel http://www.complexspiral.com/publications/containing-floats/. Die zweite Methode ist in dokumentiert in http://www.positioniseverything.net/easyclearing.html.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top