Как убрать границу <ul>последнего неупорядоченного списка <li>элемента списка с помощью CSS, не меняя ничего в HTML-коде? - PullRequest
Новая
       11

Как убрать границу <ul>последнего неупорядоченного списка <li>элемента списка с помощью CSS, не меняя ничего в HTML-коде?

14 голосов
/ 05 января 2010

Как я могу удалить границу элемента <ul> последнего неупорядоченного списка *1001*, используя CSS, без добавления какого-либо класса в последний элемент списка?

Смотрите живой пример здесь: http://jsbin.com/umose

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
li
{
    display: inline;
    list-style-type: none;
    padding:0 20px 0 20px;
    border-right:1px solid green;
}
#navlist li:last-child { border-right: ; }
<p id="hello"></p>
<ul id="navlist" >
  <li ><a href="#" id="current">Item one</a></li>
  <li id="active"><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
  <li><a href="#">Item four</a></li>
  <li><a href="#">Item five</a></li>
</ul>

Ответы [ 7 ]

38 голосов
/ 05 января 2010

Добавьте этот стиль, и вам больше не нужно ничего менять: 

#navlist li:last-child { border-right:0px; }

Edit:

Оригинальный скрипт

Оригинальный скрипт, к которому относится ответ, размещен здесь, потому что jsbin.com может удалять контент, который не просматривался в течение 3 месяцев. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-right:1px solid red;
}
/* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */
</style>
</head>
<body>
  <p>Hello from JS Bin</p>
  <p id="hello"></p>
  <ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</body>
</html>
10 голосов
/ 06 января 2010

Я делаю это все время без CSS3 или JavaScript. Все, что вам нужно сделать, это запустить ваш li и использовать расширенный селектор +: 

<style>
ul li {
 float: left;
 border: none; }

li + li {
 border-left: 1px solid #F00; } 
</style>

Это сохранит первые li от границы.

3 голосов
/ 05 января 2010

Использование CSS3

Для удаления последнего <li> в <ul>

ul li:last-child { 
    border:none; 
  }
2 голосов
/ 24 января 2011

Я бы использовал CSS, чтобы сделать все, но в этом случае использование :last-child не совместимо между браузерами (я только столкнулся с проблемами IE).

Я не стесняюсь использовать JavaScript, чтобы помочь мне в стиле, но только в тех случаях, когда CSS не может добиться цели во всех браузерах.

Я вижу два способа сделать это, первый рекомендует добавлять класс к каждому последнему <li> в списке <ul>. Это может быть сделано на стороне сервера, но я не эксперт в области кодирования на стороне сервера, поэтому, если вы используете jQuery, вы можете написать такой простой код: 

$("ul li:last-child").addClass("noborder");

Это добавит класс noborder к каждому последнему элементу внутри ul. jQuery использует движок селектора JavaScript CSS, чтобы вы могли использовать более сложные селекторы и заставить их работать во всех браузерах. Вам следует прочитать об автономном двигателе Sizzle , если вы заинтересованы.

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

Используя $.css(), вы можете добавить стиль непосредственно к элементу; 

$("ul li:last-child").css("border-right", "0");

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

Если вам не нравится использование jQuery, можно написать чистый код JavaScript, чтобы получить тот же эффект, но зачем?

1 голос
/ 26 июля 2012

Вы можете использовать first-child, потому что свойство last-child входит в CSS3. 

#navlist li:first-child { border-left:0; }

Проверьте по ссылке: http://www.quirksmode.org/css/contents.html

Теперь проверьте код ниже: 

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
    display: inline;
    list-style-type: none;
    padding:0 20px 0 20px;border-left:1px solid red
}
#navlist li:first-child{border-left:none}
<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
  <li id="active"><a href="#" id="current">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
  <li><a href="#">Item four</a></li>
  <li><a href="#">Item five</a></li>
</ul>
0 голосов
/ 17 ноября 2016

Используйте вот так 

li:nth-child(){ border-left:none;}

Примечание

Поместите номер позиции li (например, 3 или 4 или 5) внутри (); также манипулируйте границей влево или вправо. 

div p { display:inline-block; background:darksalmon; padding:4px;
        border-left:13px solid silver; }
div p:first-of-type { color:#fff; border-left:13px solid magenta; }

li { border-right:2px solid blue; 
     display:inline-block;padding:7px; background:skyblue;color:#fff;
}
ul li:nth-last-of-type(2) + li {
    background:hsla(80,100%,60%,0.16);
    border-right:none;
    color:#000000;
} 
<h1>both universal solid style for 
   <i style='color:#1AB9FC'>Left or Right</i> border remove
</h1>
<div>
  <h3 style="color:olive; text-align:center;">Target rightborder</h3>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>
<br>
<ul>
  <li>li-1</li>
  <li>li-2</li>
  <li>li-3</li>
  <li>li-4</li>
  <li>li-5</li>
  <li>li-6</li>
</ul>
<h3>Remove left border</h3>
<p><b>Note: </b><span>Last <code>li</code> always selected if you increase the <code>li</code> items in future</span></p>
0 голосов
/ 05 января 2010

Я бы попробовал jQuery, примерно так: 

$("#myDiv ul li:last-child").addClass("lastLi");

Вам нужно будет заставить класс lastLi установить ширину границы li равной 0.

Вот ссылка на документацию по селектору jQuery last-child: http://docs.jquery.com/Selectors/lastChild

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...