Я хочу, чтобы синие биты кнопок были одинаковой длины друг от друга

Я хочу, чтобы синие биты кнопок были одинаковой длины, так что они выглядели круто в столбце, а не все беспорядочноЯ хочу, чтобы синие биты кнопок были одинаковой длины друг от друга

контекст контекст контекст

.button { 
 
    border: 0px solid #000000; 
 
    background: #70D4C7; 
 
    padding: 3.5px 7px; 
 
    -webkit-border-radius: 1px; 
 
    -moz-border-radius: 1px; 
 
    border-radius: 1px; 
 
    text-shadow: #70D4C7 0 1px 0; 
 
    font-size: 20.5px; 
 
    font-family: Fira Sans; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    color: #000000; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <div id="button"> 
 
    <a href="#" style="color: black" class="button"><strong>Homepage</strong></a> 
 
    <br> 
 
    <br> 
 
    <a href="#" style="color: black" class="button"> <strong>exampleexample</strong> 
 
    </a> 
 
    <br> 
 
    <br> 
 
    <a href="#" style="color: black" class="button"><strong>example </strong></a> 
 
    </nav> 
 
    <p></p> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-09-22 leafstone

Попробуйте добавить 'display: block' и удалить теги'
'(вместо этого используйте« margin-bottom'), если вам нужно место) –

У вас есть потерянный тег ''. Кроме того, почему вы ставите ссылки в качестве кнопок? Это обычно считается плохим дизайном. Кнопки должны быть кнопками, а ссылки должны быть ссылками. –

Для более nitpicky обратной связи: 'border-radius' больше не нуждается в префиксах поставщика,' vertical-align' ничего не делает здесь (ваш 'padding' обрабатывает это просто отлично), и вы должны процитировать и предоставить резерв для шрифта, например 'font-family:« Fira Sans », sans-serif;' –

Вы можете обернуть каждую ссылку в DIV:

<div> 
    <a href="#" style="color: black" class="button"><strong>Homepage</strong></a> 
</div>

Удалить теги <br/>. И добавьте следующий CSS (заметьте, я переехал цвет фона из вашего сегмента CSS, чтобы здесь):

#button > div { 
    margin: 10px; 
    width: 100%; 
    background: #70D4C7; 
} 

#button { 
    width: 40%; 
}

Примечание: Как правило, считается плохой стиль кодирования использовать элементы для других целей, чем которые они предназначены , Так, например, кнопки должны использоваться как кнопки, а ссылки должны использоваться как ссылки. Ссылки не должны быть в виде кнопок. Но, если вы настаиваете на вашей текущей структуре, вышеуказанные изменения будут производить следующий эффект:

Here is a Fiddle Demo

источник

2016-09-22 20:29:24

<a> по умолчанию display:inline, поэтому он не может иметь ширину. Просто добавьте к классу button:

.button{ 
    width:200px; 
    display:block; 
}

и ваша проблема решена.

источник

2016-09-23 07:43:37

Я хочу, чтобы синие биты кнопок были одинаковой длины друг от друга

ответ

Смежные вопросы