如何刪除活動選項卡的底部邊框？

Question

我需要你的幫助，

我似乎無法在我的生活中（並且據我對 CSS 的了解）似乎能夠成功地從我的活動選項卡中刪除底部的綠色邊框。 我錯過了什么嗎？

這是問題的圖片：

CSS：

   h1 {padding: 100px 0; font-weight: 400; text-align: center;}
   p {margin: 0 0 20px; line-height: 1.5;}

   .main {margin: 0 auto; min-width: 320px; max-width: 800px;}

    .content {
        background: #fff;
        border: 1px solid green;
    }

   .content > div {display: none; padding: 20px 25px 5px;}

   input {display: none;}
   label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
   label:hover {color: #fff; cursor: pointer;}

    input:checked + label {
        background: #ccc;
        color: #fff;
        border-top: 1px solid green;
        border-left: 1px solid green;
        border-right: 1px solid green;
        border-bottom: 0px !important;

    }

   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   #tab3:checked ~ .content #content3,
   #tab4:checked ~ .content #content4 {
     display: block;
   }

   @media screen and (max-width: 400px) { label {padding: 15px 10px;}

HTML 標記：

<div class="main">

          <input id="tab1" type="radio" name="tabs" checked>
          <label for="tab1">New York</label>

          <input id="tab2" type="radio" name="tabs">
          <label for="tab2">London</label>

          <input id="tab3" type="radio" name="tabs">
          <label for="tab3">Mumbai</label>

          <input id="tab4" type="radio" name="tabs">
          <label for="tab4">Tokyo</label>

          <div class="content">  
              <div id="content1">
                <p>
                  New York – referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway for legal immigration to the United States and one of the most populous urban agglomerations in the world. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment.
                <p>
                  Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
                </p>
              </div>

              <div id="content2">
                <p>
                 London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
                </p>
                <p>
                  London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core.
                </p>
              </div>

              <div id="content3">
                <p>
                  Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
                </p>
                <p>
                  Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
                </p>
              </div>

              <div id="content4">
                <p>
                 Tokyo, officially Tokyo Metropolis, is one of the 47 prefectures of Japan. Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
                </p>
                <p>
                 Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo.
                </p>
              </div>
          </div>

</div>

Answer 1

我建議使用pseudo-elements

 h1 { padding: 100px 0; font-weight: 400; text-align: center; } p { margin: 0 0 20px; line-height: 1.5; }.main { margin: 0 auto; min-width: 320px; max-width: 800px; }.content { background: #fff; border: 1px solid green; }.content>div { display: none; padding: 20px 25px 5px; } input { display: none; } label { display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center; } label:hover { color: #fff; cursor: pointer; } input:checked+label { background: #ccc; color: #fff; border-top: 1px solid green; border-left: 1px solid green; border-right: 1px solid green; border-bottom: 0px;important: position; relative: } input:checked+label::before { content; '': position; absolute: width; 100%: height; 1px: background; #ccc: bottom; -1px: right; 0: left; 0: margin; auto: } #tab1.checked~,content #content1: #tab2.checked~,content #content2: #tab3.checked~,content #content3: #tab4.checked~:content #content4 { display; block: } @media screen and (max-width: 400px) { label { padding; 15px 10px; }

 <div class="main"> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">New York</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">London</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">Mumbai</label> <input id="tab4" type="radio" name="tabs"> <label for="tab4">Tokyo</label> <div class="content"> <div id="content1"> <p> New York – referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway for legal immigration to the United States and one of the most populous urban agglomerations in the world. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment. <p> Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world. </p> </div> <div id="content2"> <p> London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> <p> London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core. </p> </div> <div id="content3"> <p> Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world. </p> <p> Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia. </p> </div> <div id="content4"> <p> Tokyo, officially Tokyo Metropolis, is one of the 47 prefectures of Japan. Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p> <p> Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo. </p> </div> </div> </div>

Answer 2

我分析了您的代碼，您在屏幕上查看的邊框不是活動選項卡的邊框底部，而是帶有 class 名稱“內容”的 div 的邊框。 也許您將不得不更改“內容” div 邊框的顏色。

Answer 3

將 input:checked+label 的下邊框更改為

input:checked+label {
    border-bottom: 1px solid #ccc;
}

然后向.content 添加邊距，例如：

.content {
    margin-top: -1px;
}