CSS: я хотел бы, чтобы мои ссылки выглядели как кнопки, но они перекрываются - PullRequest
Новая
       14

CSS: я хотел бы, чтобы мои ссылки выглядели как кнопки, но они перекрываются

5 голосов
/ 29 октября 2010

Чтобы все мои ссылки выглядели как кнопки, я сделал это в своем CSS: 

a {
  color: #06A;
  text-decoration: underline;
  margin: 10px 20px;
  padding: 10px 20px;
  /*background-color: #EEE;*/
  border: #BBB solid 1px;
}

Они выглядят хорошо, однако, они, кажется, перепуталирасположены так, как будто у них нет отступов или полей.

Взгляните сюда, если вы все еще не видите мою точку зрения: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink

Ответы [ 6 ]

9 голосов
/ 29 октября 2010

<a> по своей природе и определению является встроенным элементом, что означает, что ему нельзя задавать ширину, высоту, отступы или поля (наряду с несколькими другими стилями).

Чтобы изменить это, просто добавьте display: block;, который превратит его в элемент уровня блока, включающий отступы, поля и т.д.принять эти стили, используйте display: inline-block;.Это также относится к другим встроенным элементам, таким как <span>.

2 голосов
/ 29 октября 2010

Самое простое решение - правильно установить line-height (без изменения display).

1 голос
/ 30 октября 2010

@ комментарий к вопросу о снежинке заставил меня задуматься.

Это может помочь вам узнать, что есть те, кто считает, что использование списка для такого рода контента лучше, чем разметка простых тегов привязки (в конце концов, это список жанров, это не так?).

Код для этого будет выглядеть примерно так:

HTML: 

<ul class="genrelist">
   <li><a href="#fantasy">Fantasy</a></li>
   <li><a href="#childrensliterature">Children's Literature</a></li>
   <li><a href="#speculativefiction">Speculative Fiction</a></li>
   <li><a href="#absurdistfiction">Absurdist Fiction</a></li>
   <li><a href="#fiction">Fiction</a></li>
   <li><a href="#wordicantread">Word I can't read</a></li>
</ul>

CSS: 

.genrelist {
  list-style-type: none;
  overflow: hidden;
}

.genrelist li {
  /*background-color: #EEE;*/
  border: #BBB solid 1px;
  display: inline;
  float: left;
  margin: 10px 20px;
  padding: 10px 20px;
}

.genrelist li a {
  color: #06A;
  text-decoration: underline;
}

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

Demonstration of inline list markup

1 голос
/ 29 октября 2010

Вы можете рассмотреть возможность использования стиля float: 

<a style='float:left' href='#' />

... что позволит вам делать все самое интересное и "помогать" позиционировать своих якорей в качестве бонуса.

(Если вы хотите, чтобы вещи перестали плавать, поставьте clear:both)

1 голос
/ 29 октября 2010

Попробуйте оформить ссылки с помощью display: inline-block; .

1 голос
/ 29 октября 2010

Используйте «display: block», чтобы сделать отступы и отступы.

...