Исправьте размер границы радиуса, независимо от того, сколько текста он оборачивает

Question

Я реализую простой чат, и я столкнулся с простой проблемой: я хотел обернуть имя пользователя в border-radius.

CSS:

    .chat-username {
    padding: 4px 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    }

выдержка AJAX:

    $.each(data.messages, function(index, message) {
        $("#chat").append($("<p><span class=\"chat-username\"><b>"+ message.name + "</b></span><span>" + message.text +"</span></p>"));
    });

Ну, моя цель была достигнута с помощью этого кода. Но проблема в том, что, в зависимости от размера имени пользователя, я, очевидно, получаю более широкие или более узкие границы:

Есть ли способ «исправить» размер границы (скажем, сделать его с минимальным размером, подобным границе «imjustatest»), с центрированным текстом имени пользователя?

Answer 1

Вы говорите о минимальной ширине?

Если это так, то вы можете просто использовать свойство min-width:

min-width: 80px;
text-align: center;

---

Забыли о вашем типе элемента.Вы используете inline элементов (<span>).

Вы можете перейти кросс-браузер и сделать следующее:

display: block;
float: left;

Или использовать display: inline-block и оставить IE7 вне.