htmlとcssを使ってサークルの後にテキストを移動する方法

こんにちは私はサークルを作成しました。私は円の後にテキストを移動することを望む。htmlとcssを使ってサークルの後にテキストを移動する方法

マイplunker：https://plnkr.co/edit/48EpeXDtj9sgAp2hiyF3?p=preview

スニペット：

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
#circle { 
 
    position: relative; 
 
    background-color: #09f; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200px; 
 
} 
 
    #text { 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 60%; 
 
    color: #fff; 
 
} 
 
</style> 
 
<body> 
 
<div id="circle"><div id="text">T</div></div>ext 
 

 

 
</body> 
 
</html>

おかげ

Vinoth

出典

2017-07-21 Vinoth

？または、後に？ – DMrFrost

@DMrFrostは右 – Vinoth

彼らは両方のブロック要素であるため、彼らは両方トン意志100％の幅で表示されます（したがって、新しい行に表示されます）。私はあなたも理解していればあなたは、あなたの要素の垂直整列を修正する必要がありますインライン要素のいずれかを使用することで、またはdisplay:inline-block

にあなたの要素を設定し、このための修正

更新はhere

出典

2017-07-21 08:05:24 hairmot

にした後、私は円が、私は答えを編集したが、それはあなたの最初のcaracterとフォントサイズによっては本当に正確ではないかもしれない最初の文字 – Vinoth

をplunk質問、あなたはCSSで試すことができます：あなたのHTMLクリーナーを作る前に。このよう

div#circle { 
 
    padding-left:18px ; 
 
    height:30px ; 
 
    position:relative ; 
 
    padding-top:5px ; 
 
    z-index:2 ; 
 
    box-sizing:border-box ; 
 
} 
 

 
div#circle:before { 
 
    content:' ' ; 
 
    position: absolute; 
 
    background-color: #09f; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    top:0 ; 
 
    left:0 ; 
 
    z-index:1 ; 
 
} 
 

 
div#circle span { 
 
    color:#FFF ; 
 
    position:relative ; 
 
    z-index:3 ; 
 
    display:inline-block ; 
 
    width:12px ; 
 
}

<div id="circle"><span>D</span>ext</div>

は

出典

2017-07-21 08:07:55

を更新することができます。 padding-leftを調整する必要があるかもしれません：div＃circleの18px、span＃span幅のdiv。あなたが中心になるように最初の文字をしたい場合、これはうん任意の文字 – hairmot

を含まなければならないと考えているplunker –

は同じマークアップで何かビットクリーナーが異なるCSSのアプローチを行うことができますそれは絶対に正しいです。最初の手で私はあなたがサークルの手紙を欲しかったことを知らなかった。 – hairmot

？

<style> 
#circle { 
    background-color: #09f; 
    width: 30px; 
    height: 30px; 
    border-radius: 200px; 
    float:left; 
    position: relative; 
    display: inline-block; 
} 
    #text { 
    top: 25%; 
    color: #fff; 
    float:left; 
    position: relative; 
    display: inline-block; 
    margin-left:10px; 
    } 
</style>

出典

2017-07-21 08:09:16 DMrFrost

1.与えられたスタイルにのセレクタとしてターゲットに該当するクラスとタグ内の要素をラップします。

ネストrelative親要素内absolute要素、absolute要素位置は、現在の親要素に「相対的」です。右の後

#circle { 
 
    position: relative; 
 
    background-color: #09f; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200px; 
 
} 
 
.text-inner { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 3px; 
 
    color: #fff; 
 
} 
 
.text-outer { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: -20px; 
 
}

<!DOCTYPE html> 
 
<div id="circle"> 
 
    <div class="text-inner">T</div> 
 
    <div class="text-outer">ext</div> 
 
</div>

出典

2017-07-21 08:13:01 UncaughtTypeError

#circle { 
 
    background-color: #09f; 
 
    width: 30px; 
 
    text-align:center; 
 
    height: 30px; 
 
    border-radius: 200px; 
 
    } 
 
#text { 
 
    position:relative; 
 
    top:5px; 
 
    color: #fff; 
 
} 
 

 
#ext{ 
 
/* if don't want any space then remove this */ 
 
position:relative; 
 
} 
 

 
div { 
 
display:inline-block; 
 
vertical-align:middle; 
 
}

<body> 
 
<div id="circle"><div id="text">T</div></div> <div id="ext"> ext </div> 
 
</body>

出典

2017-07-21 08:15:50

htmlとcssを使ってサークルの後にテキストを移動する方法

答えて

関連する問題