如何设置如下面的龙头面板链接和图像

Question

我想设计一个如下所示的标签面板（来自链接https://erezeki.my/ms/how-it-works-my/），但我不知道如何设置标签标题以遵循窗格的宽度以及如何设置外部更大胆：

问题： 1.如何使标签头宽度变满，并在链接中设置边框。

到目前为止我做了什么

源代码：

private void btnSpremiActionPerformed(java.awt.event.ActionEvent evt) {                                          

    String tim1 = txtTim1.getText();
    String tim2 = txtTim2.getText();
    DateFormat datum = txtDate.getDateFormat();

    Utakmice utakmice = controll.kreirajUtakmice(tim1, tim2, datum);
    controll.spremiUtakmice(utakmice);
}   

/*---Tab Js --*/
$("#simple-design-tab a").on('click', function(e){
  e.preventDefault();
  $(this).tab('show');
});

/*----------------Icon Tab style----*/
.tab .nav-tabs{
  background: #ffffff;
}
.tab .nav-tabs li{
  margin-bottom: 0;
  margin-right: 0;
  height: 100%;
  float: none;
  display: inline-block;
}
.tab .nav-tabs li a{
  font-size: 25px;
  color: #464545;
  background: rgb(147, 147, 147);
  margin-right: 0px;
  padding: ;
  border-radius: 0;
  text-transform: uppercase;
  border:0px solid #e7ecea;
  transition:ease-in-out 0.5s;
}
.tab .nav-tabs li a:hover{
  color: #464545;
  border: 0px solid transparent;
  background: #ffffff;
}
.tab .nav-tabs li a i{
  font-size: 20px;
  margin-right: 0px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover{
  background: #ffffff;
  color: #464545;
  border: 0px solid transparent;
  border-top: 3px solid transparent;
  border-top-color: #eb1e1e;
}
.tab .tab-content{
  font-size: 14px;
  color: #707c88;
  font-family:'Quicksand', sans-serif;
  line-height: 30px;
  background: #ffffff;
  margin: 10px;
}
@media only screen and (max-width: 990px){
  .tab .nav-tabs li a{ padding: 15px 10px; }
  .tab .tab-content{ padding: 20px 25px; }
}
@media only screen and (max-width: 767px){
  .tab .nav-tabs li a{ padding: 15px 5px; }
}
@media only screen and (max-width: 480px){
  .tab .nav-tabs li{ width:100%; }
}

Answer 1

使用border-top删除box-shadow和有效边框，并根据屏幕调整字体大小

工作Demo

/*---Tab Js --*/
$("#simple-design-tab a").on('click', function(e){
  e.preventDefault();
  $(this).tab('show');
});

/*----------------Icon Tab style----*/
.tab .nav-tabs{
  background: #ffffff;
}
.tab .nav-tabs li{
  margin-bottom: 0;
  margin-right: 0;
  height: 100%;
  float: none;
  display: table-cell;
  width:1%;
}
.tab .nav-tabs li a{
  font-size: 20px;
  color: #464545;
  background: rgb(147, 147, 147);
  margin-right: 0px;
  padding: ;
  border-radius: 0;
  text-transform: uppercase;  
  transition:ease-in-out 0.5s;
  text-align:center;
}
.tab .nav-tabs li a:hover{
  color: #464545;
  border: 0px solid transparent;
  background: #ffffff;
}
.tab .nav-tabs li a i{
  font-size: 20px;
  margin-right: 0px;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover{
  background: #ffffff;
  color: #464545;
  box-shadow: 0 3px 0px #eb1e1e inset;
}
.tab .tab-content{
  font-size: 14px;
  color: #707c88;
  font-family:'Quicksand', sans-serif;
  line-height: 30px;
  background: #ffffff;
  margin: 10px;
}
@media only screen and (max-width: 990px){
  .tab .nav-tabs li a{ padding: 15px 10px; }
  .tab .tab-content{ padding: 20px 25px; }
}
@media only screen and (max-width: 767px){
  .tab .nav-tabs li a{ padding: 15px 5px; }
}
@media only screen and (max-width: 480px){
  .tab .nav-tabs li{ width:100%; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section class="tab-sec">
  <div class="container">
    <div class="col-md-12 col-sm-12">
      <div class="tab tool-tab" role="tabpanel" style="border:1px solid #ddd;">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#Section1" role="tab" data-toggle="tab">Tugasan Digital Mikro</a></li>
            <li role="presentation"><a href="#Section2" role="tab" data-toggle="tab">Kerja Digital</a></li>
            <li role="presentation"><a href="#Section3" role="tab" data-toggle="tab">Kerja Bukan Digital</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content tabs" id="home">
          <div role="tabpanel" class="tab-pane fade in active" id="Section1">
            <p>Tugasan atau kerja yang tidak memerlukan kemahiran teknikal ICT seperti menjalankan kaji selidik menggunakan borang pertanyaan, menjalankan tugasan dan perkhidmatan domestik, dimana tugasan ini diberikan secara atas talian, tetapi tugasan itu perlu dilakukan di luar rangkuman atas talian.</p>
            <br>Contol tugasan Kerja Bukan Digital adalah: –
            <br>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="Section2">
            <h3>Section 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum sed diam ac fermentum. Mauris nec pellentesque neque. Cras nec diam euismod, congue sapien eu, fermentum libero. Vestibulum quis sem.</p>
          </div>
          <div role="tabpanel" class="tab-pane fade" id="Section3">
            <h3>Section 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum sed diam ac fermentum. Mauris nec pellentesque neque. Cras nec diam euismod, congue sapien eu, fermentum libero. Vestibulum quis sem.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Tab section End -->