CSSで特定の境界線を描画するにはどうすればよいですか？

Question

私はこのような境界線にしたい。このように見えるようにした後、私が欲しい

：：前

を

"Lableは" のようなliタグです：

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li>   
</ul> 

下のボックスはdivのような要素です：

<div class="main-container"> 

</div> 

私はこのように試してみました：

li{ 
    border-top: 1px solid red; 
    border-left: 1px solid red; 
    border-right: 1px solid red; 
} 

div{ 
    border: 1px solid red; 
} 

はしかし、2つの境界が重複して嫌です。

は、領域を誤って計算して反応型を設計することができなかったため、table-cellメソッドを避けたいと考えています。

Answer 1

は、あなたのアクティブなタブにborder-bottom:1px white solid;を適用し、そのpadding-bottomを増大させることができます。今度はz-indexで調整してください。それはそれです:)

下記のリンクを参照してください。

https://jsfiddle.net/vaishuk/kpova28h/

Answer 2

<div class="main-container"> 
<ul> 
    <li class="list-item active">one</li> 
    <li class="list-item ">two</li> 
    <li class="list-item ">three</li>   
</ul> 
</div> 



<script> 
     $('ul li.list-item').click(function(){ 
     $('ul li.list-item').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
    </script> 

Answer 3

この便利

function openCity(evt, cityName) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
}

/* Style the tab */ 
 
.tab { 
 
    overflow: hidden; 
 
} 
 
/* Style the buttons inside the tab */ 
 
.tab button { 
 
    background-color: white; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 
/* Change background color of buttons on hover */ 
 
.tab button:hover { \t  
 
    
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
.tab button.active {  
 
    border-left:1px solid red;  
 
    border-top:1px solid red; 
 
    border-right:1px solid red;  
 
    border-bottom:1px solid white; 
 
} 
 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    border: 1px solid red; \t 
 
    margin-top:-1px; 
 
}

<p>Click on the buttons inside the tabbed menu:</p> 
 

 
<div class="tab"> 
 
    <button class="tablinks active" onclick="openCity(event, 'London')">London</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
 
</div> 
 

 
<div id="London" class="tabcontent" style="display:block"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div>