Как избежать перекрытия элементов 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

Вот демо Если я получил свой вопрос прямо я имею в виду Css часть

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

Link https://jsfiddle.net/1uh3ha5w/

Answer 3

я получил ответ на мой собственный. То, что я просто изменил свою позицию от absolute до relative, а затем я поставил значение left в 50%, чтобы выровнять свое содержание права следующим образом:

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