Question

我在弹出窗口中的标签中有标签：

＆＃13;

.tabs {

  width: 100%;

  height: 36px;

  font-size: 0;

}

.tabs .tab {

  width: 40%;

  height: 100%;

  padding: 7.5px 0 2px;

  display: inline-block;

  text-align: center;

  /* font-family: 'Oswald', sans-serif; */

  font-weight: 700;

  font-size: 12px;

  cursor: pointer;

}

.defaultselectedtab {

  border-top-style: solid;

  border-right-style: solid;

  border-left-style: solid;

  border-bottom-style: solid;

  border-top-color: black;

  border-right-color: black;

  border-left-color: black;

  border-bottom-color: gray;

}

.defaultnonselectedtab {

  border-top-style: solid;

  border-right-style: solid;

  border-left-style: solid;

  border-bottom-style: solid;

  border-top-color: gray;

  border-right-color: gray;

  border-left-color: gray;

  border-bottom-color: black;

}

#emailtabspacing {

  border-bottom-style: solid;

  border-bottom-color: black;

  padding: 0px 50px 27px 0px;

}

＆＃13;

<body>
  <div class="tabs">
    <div id="emailtab1" class="tab defaultselectedtab">My Personal Message</div>
    <span id="emailtabspacing"></span>
    <div id="emailtab2" class="tab defaultnonselectedtab">Anonymous Message</div>
  </div>

＆＃13;

如何从div的左侧和右侧向外延伸边框，使线条在身体标记的左侧和右侧？？

Answer 1

要将边框从左侧和右侧扩展到页面边缘（我认为这是您想要的），请将border-bottom添加到.tabs，并确保body已没有保证金（见下面的代码）。 Using a reset也可以帮助清除这样的默认浏览器CSS等等。

＆＃13;

body {
margin:0;
}

.tabs {

  width: 100%;

  height:36px;

  font-size: 0;
border-bottom:2px solid #000;

}

.tabs .tab {

  width: 40%;

  height: 100%;

  padding: 7.5px 0 2px;

  display: inline-block;

  text-align: center;

  /* font-family: 'Oswald', sans-serif; */

  font-weight: 700;

  font-size: 12px;

  cursor: pointer;

}

.defaultselectedtab {

  border-top-style: solid;

  border-right-style: solid;

  border-left-style: solid;

  border-bottom-style: solid;

  border-top-color: black;

  border-right-color: black;

  border-left-color: black;

  border-bottom-color: gray;

}

.defaultnonselectedtab {

  border-top-style: solid;

  border-right-style: solid;

  border-left-style: solid;

  border-bottom-style: solid;

  border-top-color: gray;

  border-right-color: gray;

  border-left-color: gray;

  border-bottom-color: black;

}

#emailtabspacing {

  border-bottom-style: solid;

  border-bottom-color: black;

  padding: 0px 50px 27px 0px;

}

＆＃13;

<body>
  <div class="tabs">
    <div id="emailtab1" class="tab defaultselectedtab">My Personal Message</div>
    <span id="emailtabspacing"></span>
    <div id="emailtab2" class="tab defaultnonselectedtab">Anonymous Message</div>
  </div>

＆＃13;

从div

1 个答案: