如何更改语义UI下拉菜单的边框样式？

问题描述 投票：0回答：2

我正在为下拉菜单使用语义UI，而我只包括了语义的下拉菜单和过渡部分。我需要更改我的下拉列表中项目的边框，但是除了第一个元素外，其他元素都有粗体边框。我已将border-bottom-width设置为0，以使border的边只有3个面，并使所有内容统一，但它不起作用。

[此外，当下拉开关在移动视图上展开时，“联系我们”部分将从导航栏切换为剪切。 （导航栏是使用Bootstrap 4制作的。）

这是我用于下拉菜单和下拉菜单的CSS。

.item{
  border-color: #812485 !important;
  border-bottom-width: 0px !important;
  border-width: 1px !important;
  color: #3F72AF !important;
  border-style: solid !important;
}
 .navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

这是codepen https://codepen.io/arnab4srk/pen/qBOoqre

html css bootstrap-4 dropdown semantic-ui
2个回答
0
投票

正如我所看到的，您正在尝试使边框的所有三个侧面都具有语义，因此您可以这样做，您需要做的就是通过检查其在代码中的位置来确保您的CSS正常工作

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border: 1px solid #3F72AF !Important;
  border-top: 0 !important;
}
.ui.dropdown .menu>.item:first-child {
 border-top: 1px solid #3F72AF !Important;
}
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <!--navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand h1" href="#">
      <div class="logo">
        <img src="Assets/Images/logoWhite.png" height="60px" width="47px">
        <img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="newsMenu">
      <div class="navbar-nav">
        <a class="nav-item nav-link nav-pills" href="index.html">Home</a>

        <div class="ui dropdown">
          <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
          <div class="menu">
            <div class="item">
              Languages
              <div class="menu">
                <a class="courses item" href="courses/spanish.html">Spanish</a>
                <a class="courses item" href="courses/french.html">French</a>
                <a class="courses item" href="courses/german.html">German</a>
              </div>
            </div>

            <div class="item">
              Technical
              <div class="menu">
                <a class="courses item" href="courses/web.html">Web Development</a>
                <a class="courses item" href="courses/app.html">App Development</a>
                <a class="courses item" href="courses/ios.html">iOS Development</a>
                <a class="courses item" href="courses/c.html">C</a>
                <a class="item courses" href="courses/c++.html">C++</a>
                <a class="item courses" href="courses/java.html">Java</a>
                <a class="courses item" href="courses/python.html">Python</a>
              </div>
            </div>
            <div class="item">
              IOT with Robotics
              <div class="menu">
                <a class="courses item" href="courses/iot.html">Internet of Things</a>
                <a class="courses item" href="courses/robotics.html">Robotics</a>
                <a class="courses item" href="courses/drone.html">Drone Making</a>
              </div>
            </div>
            <div class="item">
              Marketing
              <div class="menu">
                <a class="courses item" href="courses/dm.html">Digital Marketing</a>
              </div>
            </div>
            </div>
          </div>
          <div class="ui dropdown">
            <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
            <div class="menu">
              <div class="item">
                LogIn
              </div>
              <div class="item">
                SignUp
              </div>
            </div>
          </div>
        <a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
        <a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
    <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>   
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>

这是您的决定，但我建议您保持这样，这样会好得多。

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border-bottom: 1px solid #3F72AF !Important;
}
.ui.dropdown .menu>.item:last-child {
 border-bottom: 0 !Important;
}
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather|Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <!--navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand h1" href="#">
      <div class="logo">
        <img src="Assets/Images/logoWhite.png" height="60px" width="47px">
        <img src="Assets/Images/textWhite.png" height="40px" width="116px" class="my-auto">
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#newsMenu" aria-controls="newsMenu" aria-expanded="false" aria-lable="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="newsMenu">
      <div class="navbar-nav">
        <a class="nav-item nav-link nav-pills" href="index.html">Home</a>

        <div class="ui dropdown">
          <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">Courses</a>
          <div class="menu">
            <div class="item">
              Languages
              <div class="menu">
                <a class="courses item" href="courses/spanish.html">Spanish</a>
                <a class="courses item" href="courses/french.html">French</a>
                <a class="courses item" href="courses/german.html">German</a>
              </div>
            </div>

            <div class="item">
              Technical
              <div class="menu">
                <a class="courses item" href="courses/web.html">Web Development</a>
                <a class="courses item" href="courses/app.html">App Development</a>
                <a class="courses item" href="courses/ios.html">iOS Development</a>
                <a class="courses item" href="courses/c.html">C</a>
                <a class="item courses" href="courses/c++.html">C++</a>
                <a class="item courses" href="courses/java.html">Java</a>
                <a class="courses item" href="courses/python.html">Python</a>
              </div>
            </div>
            <div class="item">
              IOT with Robotics
              <div class="menu">
                <a class="courses item" href="courses/iot.html">Internet of Things</a>
                <a class="courses item" href="courses/robotics.html">Robotics</a>
                <a class="courses item" href="courses/drone.html">Drone Making</a>
              </div>
            </div>
            <div class="item">
              Marketing
              <div class="menu">
                <a class="courses item" href="courses/dm.html">Digital Marketing</a>
              </div>
            </div>
            </div>
          </div>
          <div class="ui dropdown">
            <a class="nav-item nav-link nav-pills dropdown-toggle" href="#">LearnLive</a>
            <div class="menu">
              <div class="item">
                LogIn
              </div>
              <div class="item">
                SignUp
              </div>
            </div>
          </div>
        <a class="nav-item nav-link nav-pills" href="aboutus.html">About Us</a>
        <a class="nav-item nav-link nav-pills active" href="#">Contact Us</a>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script src="https://kit.fontawesome.com/b3a074ef19.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/dropdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/transition.min.js"></script>
    <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>   
    <script>
        $('.ui.dropdown').dropdown();
    </script>
</body>
</html>
0
投票

在上面的代码中，您要删除border-bottom-width，然后再次使用border-width: 1px;添加它。

要从下拉菜单中删除边框，只需使用：

.item{
  border: none !important;
  color: #3F72AF !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.