Question

我很生气，可能是有史以来最简单的CSS问题。我只想在List(Option("")).foreach[Any] { ...和<ul>元素之间添加一些边距。当我将鼠标悬停在某个类别时，我会使用下拉菜单。

我尝试在我拥有的每个CSS类/元素中添加<li>，但完全没有效果。我会在这里错过课程吗，或者有任何解决方法？

这是我认为是可行的解决方案，但没有附加空白：

margin-top

谢谢！

HTML：

#sidebar .subbar li:first-child {
  margin-top: 10px;
}

CSS：

    <div id="sidebar">
      <header>
        <a href="#">Dasocc</a>
      </header>
      <ul class="nav">
        <li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
          <ul class="subbar">
            <li><a class="team" id="69">FC Bayern München</a></li>
            <li><a class="team" id="70">Borussia Dortmund</a></li>
            <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
            <li><a class="team" id="74">RB Leipzig</a></li>
            <li><a class="team">VfL Wolfsburg</a></li>
            <li><a class="team">SC Freiburg</a></li>
            <li><a class="team">Eintracht Frankfurt</a></li>
            <li><a class="team">Borussia M. Gladbach</a></li>
            <li><a class="team">FC Schalke 04</a></li>
            <li><a class="team">TSG 1899 Hoffenheim</a></li>
            <li><a class="team">1. FC Union Berlin</a></li>
            <li><a class="team">Fortuna Düsseldorf</a></li>
            <li><a class="team">SV Werder Bremen</a></li>
            <li><a class="team">1. FC Köln</a></li>
            <li><a class="team">SC Paderborn</a></li>
            <li><a class="team">FC Augsburg</a></li>
            <li><a class="team">Hertha BSC Berlin</a></li>
          </ul>
        </li>

Answer 1

在您的CSS文件中尝试此操作。

.team{
 padding-left:20px;
}

或

.team{
 margin-left: 20px;
}

简单

Answer 2

解决了仅向.subbar元素添加显示块并填充顶部的问题

* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: table-row;
  list-style: none;
  
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar{
display: block;
padding-top:40px
}
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
  color:#000 !important
}
a{
color: #000
/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}

<div id="sidebar">
      <header>
        <a href="#">Dasocc</a>
      </header>
      <ul class="nav">
        <li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
          <ul class="subbar">
            <li><a class="team" id="69">FC Bayern München</a></li>
            <li><a class="team" id="70">Borussia Dortmund</a></li>
            <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
            <li><a class="team" id="74">RB Leipzig</a></li>
            <li><a class="team">VfL Wolfsburg</a></li>
            <li><a class="team">SC Freiburg</a></li>
            <li><a class="team">Eintracht Frankfurt</a></li>
            <li><a class="team">Borussia M. Gladbach</a></li>
            <li><a class="team">FC Schalke 04</a></li>
            <li><a class="team">TSG 1899 Hoffenheim</a></li>
            <li><a class="team">1. FC Union Berlin</a></li>
            <li><a class="team">Fortuna Düsseldorf</a></li>
            <li><a class="team">SV Werder Bremen</a></li>
            <li><a class="team">1. FC Köln</a></li>
            <li><a class="team">SC Paderborn</a></li>
            <li><a class="team">FC Augsburg</a></li>
            <li><a class="team">Hertha BSC Berlin</a></li>
          </ul>
        </li>
        </ul>
        </div>

Answer 3

这是由于在:hover事件中您将<ul>显示为table-row：

#sidebar .countries:hover .subbar {
  display: table-row;
  ...

实际上，如果将其显示为block，则会发现它以指定的边距显示，如您所愿：

#sidebar .countries:hover .subbar {
  display: block;
  ...

下面的代码段显示了它（尽管渲染效果很差）：

#sidebar {
background-color: blue;
}

/* Länderkategorien untereinander */
#sidebar .nav .countries {
  padding-top: 10px;
}

/* hovered Team */
#sidebar .nav a:hover {
  color: #FF5B5B;
  font-size: 13px;
  font-weight: bold;
  background-color: #000481;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 0.4em #000481;
}

/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}

/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
  display: none;
  width: 100%;
  padding-top: 15px;
}

/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: block;
  list-style: none;
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
}

/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}

<div id="sidebar">
  <header>
    <a href="#">Dasocc</a>
  </header>
  <ul class="nav">
    <li class="countries"><img src="" alt="germany">1. Bundesliga
      <ul class="subbar">
        <li><a class="team" id="69">FC Bayern München</a></li>
        <li><a class="team" id="70">Borussia Dortmund</a></li>
        <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
        <li><a class="team" id="74">RB Leipzig</a></li>
        <li><a class="team">VfL Wolfsburg</a></li>
        <li><a class="team">SC Freiburg</a></li>
        <li><a class="team">Eintracht Frankfurt</a></li>
        <li><a class="team">Borussia M. Gladbach</a></li>
        <li><a class="team">FC Schalke 04</a></li>
        <li><a class="team">TSG 1899 Hoffenheim</a></li>
        <li><a class="team">1. FC Union Berlin</a></li>
        <li><a class="team">Fortuna Düsseldorf</a></li>
        <li><a class="team">SV Werder Bremen</a></li>
        <li><a class="team">1. FC Köln</a></li>
        <li><a class="team">SC Paderborn</a></li>
        <li><a class="team">FC Augsburg</a></li>
        <li><a class="team">Hertha BSC Berlin</a></li>
      </ul>
    </li>
  </ul>
</div>

如何更改<ul>和<li>元素之间的空间？

3 个答案: