Div-Tag in einer einzigen Zeile

Ich bin mit dem Problem hinsichtlich der CSS-div-Tag konfrontiert.Div-Tag in einer einzigen Zeile

Dies ist mein Code, den ich verwende.

#title { 
 
     float: left; 
 
     background-color: #2e3539; 
 
     color: white; 
 
    } 
 
    
 
    .arrow-down { 
 
     float: left; 
 
     width: 0; 
 
     height: 0; 
 
     border-left: 15px solid transparent; 
 
     border-right: 0px solid transparent; 
 
     border-bottom: 15px solid #2e3539; 
 
    
 
    } 
 
    
 
    .arrow-up { 
 
     float: left; 
 
     width: 0; 
 
     height: 0; 
 
     border-left: 0px solid transparent; 
 
     border-right: 15px solid transparent; 
 
     border-top: 15px solid #2e3539; 
 
    
 
    }

<DIV class=arrow-down></DIV> 
 
    <DIV id=title>{Title}</DIV> 
 
    <DIV class=arrow-up></DIV>

und das ist der Ausgang

Ich versuche, alle diese Div-Tag in einer Reihe zu machen, so sollte das Bild unten mögen: -

Jungs bitte helfen, ich verstehe nicht, was ich hier falsch mache.

Jungs, ich habe einige der Vorschläge ausprobiert, aber hatte das gleiche Problem, so füge ich den vollständigen Code hier Bitte schauen Sie.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML><HEAD> 
<META content="text/html; charset=unicode" http-equiv=Content-Type> 
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD> 
<BODY> 
<H1>{First name} {Last name}</H1> 
<DIV class=arrow-down></DIV> 
<DIV id=title>{Title}</DIV> 
<DIV class=arrow-up></DIV><BR> 
<DIV id=phone> 
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV> 
<DIV id=address><SPAN>company</SPAN><BR> {address} 
<BR>{country}<BR><BR></DIV> 
<STYLE> 
@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 

body { 
    font-size:12px; 
    color: black; 
    font-family: 'Lato', sans-serif; 
} 

h1 { 
    color: #77bc1f; 
    margin: auto; 
    padding-left: 14px; 
    font-size: 17px; 
} 

span { 
    color: #77bc1f; 
    font-weight: bold; 

} 

#title { 
    float: left; 
    background-color: #2e3539; 
    color: white; 
} 
.arrow-down { 
    float: left; 
    width: 5px; 
    height: 0px; 
    border-left: 15px solid transparent; 
    border-right: 0px solid transparent; 
    border-bottom: 21px solid #2e3539; 
} 
.arrow-up { 
    float: left; 
    width: 5px; 
    height: 0; 
    border-left: 0px solid transparent; 
    border-right: 15px solid transparent; 
    border-top: 21px solid #2e3539; 
} 
</STYLE> 
</BODY>

Vielen Dank im Voraus.

Quelle

2016-12-12 kunal

https://jsfiddle.net/ozu6ru29/ scheint just fine – haim770

Fügen Sie ein zusätzliches div hinzu, das die ribbon enthalten soll, und verwenden Sie display: inline-block. Ich hoffe, das ist, was Sie brauchen:

UPDATE:

Sie müssen auch auf der #title die Zeilenhöhe einstellen gleich wie .arrow-down ‚s border-bottom und .arrow-up‘ s border-topBreite.

@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 
 
body { 
 
    font-size:12px; 
 
    color: black; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
h1 { 
 
    color: #77bc1f; 
 
    margin: auto; 
 
    padding-left: 14px; 
 
    font-size: 17px; 
 
} 
 

 
span { 
 
    color: #77bc1f; 
 
    font-weight: bold; 
 

 
} 
 

 
.container{ 
 
    font-size: 0; 
 
} 
 
#title { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #2e3539; 
 
    color: white; 
 
    font-size: 12px; 
 
    line-height: 15px; 
 
} 
 
.arrow-down { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 5px; 
 
    height: 0px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 0px solid transparent; 
 
    border-bottom: 15px solid #2e3539; 
 
} 
 
.arrow-up { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 5px; 
 
    height: 0; 
 
    border-left: 0px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #2e3539; 
 
}

<div class='container'> 
 
    <div class='arrow-down'></div> 
 
    <div id='title'>{Title}</div> 
 
    <div class='arrow-up'></div> 
 
</div>

Quelle

2016-12-12 13:20:04 Ionut

Bitte überprüfen Sie die Frage noch einmal – kunal

@kunal, überprüfen Sie meine Antwort aktualisiert. Das sollte den Trick machen. – Ionut

Just vermeiden float: left und verwenden display: inline-block statt:

.arrow-down { 
    display: inline-block; //added this line 
    float: left; 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 0px solid transparent; 
    border-bottom: 15px solid #2e3539; 

} 

#title { 
    /*float: left;*/ //remove 
    display: inline-block; 
    background-color: #2e3539; 
    color: white; 
}

Die andere Lösung mit float: von jemand anderem hier gepostet links wird auch funktionieren, aber Sie werden auch dazu führen, mehr Probleme in der Zukunft.

Quelle

2016-12-12 13:20:27 K48

Passen Sie Breite angrenzen, haben einen Blick auf das Snippet unten (gleiche Code, den Sie geschrieben haben):

<HTML><HEAD> 
 
<META content="text/html; charset=unicode" http-equiv=Content-Type> 
 
<META name=GENERATOR content="MSHTML 11.00.9600.18427"></HEAD> 
 
<BODY> 
 
<H1>{First name} {Last name}</H1> 
 
<DIV class=arrow-down></DIV> 
 
<DIV id=title>{Title}</DIV> 
 
<DIV class=arrow-up></DIV><BR> 
 
<DIV id=phone> 
 
<P style="FONT-SIZE: 10pt; FONT-FAMILY: Arial"><SPAN><BR>off:</SPAN> {mobile no} | <SPAN>mob:</SPAN> {office number}</P><BR></DIV> 
 
<DIV id=address><SPAN>company</SPAN><BR> {address} 
 
<BR>{country}<BR><BR></DIV> 
 
<STYLE> 
 
@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 
 

 
body { 
 
    font-size:12px; 
 
    color: black; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
h1 { 
 
    color: #77bc1f; 
 
    margin: auto; 
 
    padding-left: 14px; 
 
    font-size: 17px; 
 
} 
 

 
span { 
 
    color: #77bc1f; 
 
    font-weight: bold; 
 

 
} 
 

 
#title { 
 
    float: left; 
 
    background-color: #2e3539; 
 
    color: white; 
 
} 
 
.arrow-down { 
 
    float: left; 
 
    width: 5px; 
 
    height: 0px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 0px solid transparent; 
 
    border-bottom: 15px solid #2e3539; 
 
} 
 
.arrow-up { 
 
    float: left; 
 
    width: 5px; 
 
    height: 0; 
 
    border-left: 0px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #2e3539; 
 
} 
 
</STYLE> 
 
</BODY></HTML>

hoffe, das hilft!

Quelle

2016-12-12 13:23:04

Ich habe nicht Wok, also habe ich den vollständigen Code der Seite hochgeladen, überprüfen Sie bitte die Frage – kunal

@kunal Werfen Sie einen Blick auf meine aktualisierte Antwort. –

ändern, nur die Grenze der beiden Pfeil, von 21px auf 18px, diese sould der Trick

#title { 
 
     float: left; 
 
     background-color: #2e3539; 
 
     color: white; 
 
    } 
 

 
    .arrow-down { 
 
     float: left; 
 
     width: 5px; 
 
     border-left: 15px solid transparent; 
 
     border-right: 0px solid transparent; 
 
     border-bottom: 18px solid #2e3539; 
 
    } 
 

 
    .arrow-up { 
 
     float: left; 
 
     width: 5px; 
 
     border-left: 0px solid transparent; 
 
     border-right: 15px solid transparent; 
 
     border-top: 18px solid #2e3539; 
 
    }

<div class=arrow-down></div> 
 
    <div id=title>{Title}</div> 
 
    <div class=arrow-up></div><BR>

Quelle

2016-12-12 13:26:56

Sicherstellen, dass die line-height die border-top und border-bottom der beiden Dreiecke übereinstimmt, so dass die Dreiecke gleich hoch wie das #title Element sind. Wenn die drei Elemente nicht gleich hoch sind, ist es unmöglich, sie richtig auszurichten.

Diese Lösung verwendet ::before und ::after innerhalb eines inline-block Element, anstelle von drei aufeinanderfolgenden float ‚s.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head> 

<body> 

<style type="text/css"> 
@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); 

body { 
    font-size:12px; 
    color: black; 
    font-family: 'Lato', sans-serif; 
} 

h1 { 
    color: #77bc1f; 
    margin: auto; 
    padding-left: 14px; 
    font-size: 17px; 
} 

span { 
    color: #77bc1f; 
    font-weight: bold; 
} 

#title { 
    display:inline-block; 
    color: white; 
    position: relative; 
    background: #2e3539; 
    margin:0 21px; 
    padding:0 3px; 
    line-height:15px; 
} 

#title::before, 
#title::after { 
    content:""; 
    display:block; 
    position:absolute; 
    top:0; 
    width:0; 
    height:0; 
} 

#title::after { 
    right:-21px; 
    border-left: 21px solid #2e3539; 
    border-right: 0px solid transparent; 
    border-bottom: 15px solid transparent; 
} 

#title::before { 
    left:-21px; 
    border-left: 0px solid transparent; 
    border-right: 21px solid #2e3539; 
    border-top: 15px solid transparent; 
} 

#phone { 
    font-size: 10pt; 
    font-family: Arial, sans-serif; 
} 

</style> 

<h1>{First name} {Last name}</h1> 
<div id="title">{Title}</div> 
<div id="phone"> 
    <span>off:</span> {mobile no} | <SPAN>mob:</SPAN> {office number} 
</div> 
<div id=address> 
    <span>company</span><br> 
    {address}<br> 
    {country}<br><br> 
</div> 

</body> 
</html>

Quelle

2016-12-12 13:37:37 mch

Das Problem ist immer noch da, bitte überprüfen Sie den vollständigen Code, den ich aktualisiert habe. – kunal

OK Ich habe gerade das gesamte Dokument hinzugefügt, sehen, ob es hilft. – mch

'Die Signatur (im HTML-Format) enthält ein