Какой мой лучший вариант для фиксированных интервалов, соответствующих стандартам XHTML? - PullRequest
Новая
       10

Какой мой лучший вариант для фиксированных интервалов, соответствующих стандартам XHTML?

0 голосов
/ 21 сентября 2009

Я пытаюсь расположить элементы в этом меню с одинаковым количеством пикселей. В 90-х большинство веб-разработчиков, которых я знал, использовали пробелы или спейс-гифки. Они работают, но они кажутся мне плохими хакерами. Должен быть лучший способ сделать это в 2009 году! Я больше бэкэнд-кодер, поэтому некоторое время не в курсе. Буду признателен за любую помощь ... 

<div class="menu">
  <a href="#">Item 1</a> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: (replaced the semicolon with a colon so that these would show up)
  <a href="#">Item 2</a> <img src="spacer.gif" />
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</div>

Ответы [ 2 ]

1 голос
/ 21 сентября 2009

Вы можете добавить идентификатор / класс к элементу привязки и иметь правый отступ. 

<div class="menu">
  <a href="#">Item 1</a id="bar"> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
  <a href="#">Item 2</a> 
  <a href="#">Item 3</a>
  <a class="last" href="#">Item 4</a>
</div>

<style type="text/css">
#bar { padding-right:5px; }
</style>

Если вы хотите использовать что-то более общее для всех якорей, кроме последнего: 

.menu a { padding:0 5px 0 0; }
.menu a.last { padding-right:0; }
0 голосов
/ 21 сентября 2009

Используйте CSS, конечно!

В частности, поскольку вы спросили, примените стили к элементам привязки. Что-то вроде: 

div.menu { width: 480px; } 

div.menu a{
  margin:0;
  display:block;
  float:left;
  width:120px;
}

может делать то, что вы хотите. В качестве дополнительного бонуса весь блок будет действовать как ссылка, так что вы получите поведение, более похожее на кнопку, чем на текстовую ссылку, что, вероятно, то, что вам нужно, поскольку это меню. Установка явной ширины в .menu div предотвратит переносы, если окно слишком узкое.

...