Ширина деления 100%, но хотите, чтобы якорь внутри был шириной всего 85 пикселей?

Question

У меня есть div на 100%, для центрирования вещей у меня есть якорный тег внутри, я хочу только шириной 85px, но он не распознает это и будет просто расширяться в зависимости от длины текста в якоретег.

HTML:

<div class="players_names">
    <a class="player_name" href="#">34 J. Langenbrunner</a><br />
    <a class="team_name" href="#">TORONTO</a>
</div>

CSS:

.players_names{
     width: 100%;
     position: relative;
     z-index: 3;
     text-align: center;
 }
.players_names a{
     color: #fff;
 }
.players_names a.player_name {
     width: 85px;
     font-size: 1.1em;
     text-align: center;
     line-height: 1;
 }

почему он не может просто делать то, что я говорюэто делать?

Answer 1

По умолчанию a является встроенным тегом. Чтобы указать ширину (или высоту), вам нужно будет сделать так, чтобы она отображалась как inline-block (или как block, так как вы все равно хотите использовать ее на собственном праве удержания):

.players_names a.player_name {
     width:85px;
     font-size:1.1em;
     text-align: center;
     line-height: 1;
     display: block;
 }

Answer 2

a - встроенный тег уровня. Только теги уровня блока могут иметь ширину. Как было сказано в комментарии kmfk , вы можете установить display: block в своем CSS для элемента.

Answer 3

display:inline-block;

или

display:block;

на свой якорь, тогда вы сможете изменить его ширину и высоту, и если вы хотите скрыть превышающий контент, вы можете использовать:

overflow:hidden;

или вы можете использовать css3 и деформировать слово по ширине:

word-wrap: break-word;

надеюсь, это поможет

Answer 4

Просто замените

players_names a.player_name {
 width: 85px;
 font-size: 1.1em;
 /*text-align: center; - Delete this line */
 margin: 0 auto; /*Add this line*/
 display: block; /*Add this too*/
 line-height: 1;
}