<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-image: url('./img/login_bg.jpg');
      width: 100%;
      height: 100%;
    }

    .section {
      background: url(./img/login_main.png) no-repeat center top;
      height: 800px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-title {
      margin-top: -190px;
      width: 100%;
      height: 80px;
    }

    .title {
      color: white;
      margin-top: 10px
    }

    .all {
      text-align: center;
    }

    .nav {
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 80px;
      display: flex;
      border-bottom: 2px solid #ccc;
    }

    .login {
      margin: 0 20px;
      color: white;
    }

    .contentbox {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 30px;
    }

    input {
      display: block;
      width: 350px;
      height: 46px;
      border: 1px solid #c6cddc;
    }

    /*修改提示文字的颜色*/
    input::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #ffff;
    }

    

    .cont-1>input {
   
      padding-left: 10px;
      opacity: 0.4;
      border-radius: 8px;
      background-color: #6b6767;
     
    }

    .cont-1>input[name="psd"] {
      margin-top: 17px;
    }

    .btn {
      width: 352px;
      height: 50px;
      border-width: 0px;
      border-radius: 8px;
      background-image: linear-gradient(383deg, #174EEF, #15C7F2);
      cursor: pointer;
      outline: none;
      font-family: Microsoft YaHei;
      color: white;
      font-size: 17px;
      margin-top: 17px;
      font-weight: bold;
    }

    
  </style>

 <div class="section">
    <div class="all">
      <div class="login-title">
        <img src='./img/login_title.png'>
        <div class="title">全新LIMS实验室的人、机、法、料、环的全过程闭环管理</div>
      </div>

      <div class="nav">
        <a class="login on"><img src='./img/btn_user.png' width="110px" height="100px">
          <div>用户名密码登陆</div>
        </a>
        <a class="login"><img src='./img/btn_jmg.png'>
          <div>加密狗登陆</div>
        </a>
       
      </div>
      <div class="contentbox">
        <div class="box active">
          <div class="cont-1">
            <input class="icon " name="txt" type="text" placeholder="用户名">
            <input class="icon password" name="psd" type="password" placeholder="密码">
            <button class="btn">登陆</button>
          </div>
        </div>
      </div>
    </div>
  </div>

想给nav加一个底部的border 用于tab切换 但是这个宽度过长 没法设置 nav的宽度好像跟login-title一样
样式上应该怎么调整