Запрет отображения последнего бордера

[walek]

Доброго дня друзья!

Задача: отобразить нижний бордер у каждой ссылки, по примеру:

<div id="menu">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
</div>

Делаю таким образом:

#menu a
{
   text-decoration: none;
   text-align: left;
   color: #01367C;
   display: block;  
   padding: 0.7em;
   border-bottom-color: #99CCFF;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   margin-left: 5px;
}

Проблема возникает с последней ссылкой - для нее необходимо исключить отображение бордера. Честно, не знаю как и быть.

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

Спасибо!

[3ABAPKA]

А если у последней ссылки бордер оставить, а у menu убрать нижний бордер?

[walek]

А если у последней ссылки бордер оставить, а у menu убрать нижний бордер?

Как раз все наоборот, бордеры должны быть у всех, кроме последней.

[Searcher]

<a href="" style="border:none;">4</a>

[walek]

<a href="" style="border:none;">4</a>

Спасибо. Да, думал об этом, не очень красивое решение конечно, но по всей видимости по-другому никак.

Позвольте еще задать один вопрос.

Необходимо бегунок слева отобразить по всем ссылкам, делаю так:

#menu a, #menu a:visited {
	text-decoration: none;
	text-align: left;
	color: #01367C;
	display: block;  
	padding: 0.7em;
	border-bottom-color: #99CCFF;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				margin-left: 5px;
  }

#menu a:hover
{
	background: url(picB.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

<div id="menu">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="" style="border:none;">4</a>
</div>

Но, мне необходимо отрегулировать отступ междубегунком и ссылкой. Как можно это сделать?

Спасибо.

Спасибо. Да, думал об этом, не очень красивое решение конечно, но по всей видимости по-другому никак.

Позвольте еще задать один вопрос.

Необходимо бегунок слева отобразить по всем ссылкам, делаю так:

#menu a, #menu a:visited {
	text-decoration: none;
	text-align: left;
	color: #01367C;
	display: block;  
	padding: 0.7em;
	border-bottom-color: #99CCFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	margin-left: 5px;
  }

#menu a:hover
{
	background: url(picB.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

<div id="menu">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="" style="border:none;">4</a>
</div>

Но, мне необходимо отрегулировать отступ между бегунком и ссылкой. Как можно это сделать?

Спасибо.

[walek]

Позвольте еще задать один вопрос.

Необходимо бегунок слева отобразить по всем ссылкам, делаю так:

#menu a, #menu a:visited {
	text-decoration: none;
	text-align: left;
	color: #01367C;
	display: block;  
	padding: 0.7em;
	border-bottom-color: #99CCFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	margin-left: 5px;
  }

#menu a:hover
{
	background: url(picB.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

<div id="menu">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="" style="border:none;">4</a>
</div>

Но, мне необходимо отрегулировать отступ между бегунком и ссылкой. Как можно это сделать?

Спасибо.

[Searcher]

Например, отступом:

#menu a, #menu a:visited {
	padding: 0.7em 0.7em 0.7em 1.5em;
  }

[walek]

Searcher, спасибо.

Решение ближе чем мы думаем.

И все просто.