카테고리 없음

[HTML] HTML 코드에서 아무것도 변경하지 않고 CSS를 사용하여 <ul> 정렬되지 않은 목록의 마지막 <li> 목록 항목의 테두리를 제거하는 방법은 무엇입니까?

행복을전해요 2021. 1. 8. 16:33

이 스타일을 추가하면 다른 항목을 수정할 필요가 없습니다.

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

편집하다:

원본 스크립트

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>
-------------------

저는 CSS3 나 JavaScript없이 항상 이것을합니다. 당신이해야 할 일은 플로팅 li하고 고급 선택기를 사용하는 것입니다 +.

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

이것은 첫 번째 li가 국경을 갖지 못하게 할 것 입니다.

-------------------

CSS3 사용

지난 제거하려면 <li>A의를<ul>

ul li:last-child { 
    border:none; 
      }
-------------------

CSS를 사용하여 모든 작업을 수행하지만이 경우 사용 :last-child은 브라우저간에 호환되지 않습니다 (IE 문제 만 발생했습니다).

스타일링을 위해 JavaScript를 사용하는 것을 주저하지 않지만 CSS가 모든 브라우저에서 트릭을 수행 할 수없는 경우에만 가능합니다.

이 작업을 수행하는 두 가지 방법이 있습니다. 첫 번째 <li>는 <ul>목록의 마지막 모든 항목에 클래스를 추가하는 것이 좋습니다 . 이것은 서버 측에서 수행 할 수 있지만, 저는 서버 측 코딩 전문가가 아니므로 jQuery를 사용하면 다음과 같은 간단한 코드를 작성할 수 있습니다.

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

그러면 noborder.NET 내부의 모든 마지막 항목에 클래스가 추가됩니다 ul. jQuery는 JavaScript CSS 선택기 엔진을 사용하므로 더 복잡한 선택기를 사용하고 모든 브라우저에서 작동하도록 할 수 있습니다. 관심이 있다면 독립형 엔진 Sizzle 에 대해 읽어야합니다 .

모든 마지막 항목에 인라인 스타일을 추가 할 수도 있지만 작동하는 경우 위 코드를 사용하는 것이 좋습니다.

를 사용 $.css()하면 항목에 직접 스타일을 추가 할 수 있습니다.

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

동일한 선택기를 사용하여 항목을 찾습니다.

jQuery를 사용하는 것을 좋아하지 않는다면 순수한 JavaScript 코드를 작성하여 동일한 효과를 얻을 수 있지만 왜 귀찮게할까요?

-------------------

속성이 CSS3에 first-child있기 때문에 사용할 수 있습니다 last-child.

#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>
스 니펫 확장

-------------------

다음과 같이 jQuery를 시도해 보겠습니다. 

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

lastLi클래스에서 li테두리 너비를 0으로 설정 해야합니다 .

다음은 jQuery last-child선택기 문서에 대한 링크입니다 . http://docs.jquery.com/Selectors/lastChild

-------------------

이렇게 사용 

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>
스 니펫 확장



출처
https://stackoverflow.com/questions/2005941
저작자표시 (새창열림)