html要素の重複を避けるにはどうすればよいですか？

Question

私は何かを作成する問題に直面しています。私は<kbd>タグが私の体にほしいと思っています。私はそうすることができますが、問題は<kbd>要素がお互いにオーバーラップしていることです。だから、私はどのようにして<kbd>要素を右に揃え、それらの重なりを避けることができるのかを知りたい。

.me_msg { 
 
    background: rgb(250, 250, 250); 
 
    border-radius: 10px 10px 0px 10px; 
 
    border-width: 1px; 
 
    color: #003cff; 
 
    padding: 10px; 
 
    text-align: right; 
 
    padding: 1.1% 4% 1.1% 4%; 
 
    position: absolute; 
 
    right: 03%; 
 
    top: auto; 
 
    bottom: auto; 
 
    min-width: 20%; 
 
    max-width: 40%; 
 
    box-shadow: 0px 0px 3px #e9e9e9; 
 
    display: block; 
 
}

<kbd class='me_msg'>My First Message</kbd> 
 
<kbd class='me_msg'>My Second Message</kbd> 
 
<kbd class='me_msg'>My Third Message</kbd>

Answer 1

あなたが個別に/手動で各ボタンを配置する場合を除き、絶対に使用しないでください。

単純な解決方法は、代わりに浮動小数点を使用することです。

.me_msg { 
 
    background: rgb(250, 250, 250); 
 
    border-radius: 10px 10px 0px 10px; 
 
    border-width: 1px; 
 
    color: #003cff; 
 
    padding: 10px; 
 
    text-align: right; 
 
    margin-left: 10px; 
 
    padding: 1.1% 4% 1.1% 4%; 
 
    position: relative; 
 
    float: right; 
 
    min-width: 20%; 
 
    max-width: 40%; 
 
    box-shadow: 0px 0px 3px #e9e9e9; 
 
    display: block; 
 
}

<kbd class='me_msg'>My First Message</kbd> 
 
<kbd class='me_msg'>My Second Message</kbd> 
 
<kbd class='me_msg'>My Third Message</kbd>

Answer 2

ここで私はあなたが私が

.me_msg { 
     background:rgb(250,250,250); 
     border-radius:10px 10px 0px 10px; 
     border-width:1px; 
     color:#003cff; 
     padding:10px; 
     text-align:right; 
     padding:1.1% 4% 1.1% 4%; 
      float: right; 
      display: inline-block; 
      bottom:auto; 
     min-width:10%;  
      max-width:40%; 
     box-shadow:0px 0px 3px #e9e9e9; 
     } 

リンクhttps://jsfiddle.net/1uh3ha5w/

Answer 3

CSSの一部を意味し、右 に疑問だ場合、私は自分で自分の答えを得たデモです。私がやったことがちょうどabsoluteからrelativeに位置を変更してから、私は次の権利としての私のコンテンツを揃えるために50%としてleftの値を入れている：

.me_msg { 
    position: relative; 
    left:50%; 
}