Divタグが1行で

私はCSSのdivタグに関する問題に直面しています。Divタグが1行で

これは私が使用しているコードです。

#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>

そして、これは私がイメージが以下ライク必要がありますので、1行のすべてのこのdivタグを作成しようとしています出力

です： -

男は助けてください、私はここで間違っていることを理解していません。

皆さん、私は提案のいくつかを試しましたが、同じ問題がありましたので、ここで完全なコードを追加してください。

<!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>

事前にありがとうございます。

出典

2016-12-12 kunal

https://jsfiddle.net/ozu6ru29/は – haim770

ribbonを含む余分なdivを追加し、display: inline-blockを使用してください。私は、これは何が必要であると思います：

UPDATE：

あなたはまた、.arrow-downのborder-bottomと.arrow-upのborder-top幅と同じ#title上で行の高さを設定する必要があります。

@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>

出典

2016-12-12 13:20:04 Ionut

だけで罰金だ、再び – kunal

@kunalを質問をチェックし、私の更新の答えを確認してください。それはトリックを行う必要があります。 – Ionut

だけfloat: leftの使用を避け、代わりにdisplay: inline-blockを使用します。フロートと他のソリューションを

.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; 
}

：こちらを他の誰かによって投稿左も機能しますが、も、あなたの原因になります将来のトラブル。

出典

2016-12-12 13:20:27 K48

は以下のスニペット（あなたが投稿した同じコード）を見て、あなたが幅を国境調整：

<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>

・ホープ、このことができます！

出典

2016-12-12 13:23:04

私はwokをしなかったので、ページの完全なコードをアップロードしました。質問を確認してください。 – kunal

@kunal私の更新された答えを見てください。 –

はちょうどそう、これはトリック

#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>

出典

2016-12-12 13:26:56

line-heightは二つの三角形のborder-topとborder-bottomと一致していることを確認を行うsould、18pxする21pxから、両方の矢印の境界線を変更します三角形は#title要素と同等に高いことを示します。 3つの要素が等しくない場合、それらを正しく整列することは不可能です。

この解決策では、floatの3つの連続する代わりにinline-blockの要素内に::beforeと::afterを使用します。

<!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>

出典

2016-12-12 13:37:37 mch

問題はまだそこにあります、私はそれを更新した完全なコードを確認してください。 – kunal

OKドキュメント全体を追加しました。役立つかどうかを確認してください。 – mch

'（HTML形式の）署名には、タグ内に

答えて