我想从子菜单中添加房间菜单之间的距离

时间：2018-11-08 11:53:04

标签： javascript html css

我想在子菜单中的列表项之间建立一个距离，并且添加填充似乎无效。

示例：

房间照明配件联系我们关于我们
客厅
饭厅
家庭办公室或书房
卧室

它看起来应该像这样

房间照明配件联系我们

客厅
             <-----填充------>
饭厅

家庭办公室或书房

卧室

我的英语不太好，但是我希望你们明白我的意思。非常感谢您的帮助。

var flag;
myFunction();

function myFunction() {

  var x = document.getElementById("myTopnav");
  var y = document.getElementById("mySubnav");

  if (x.className === "topnav") {

    x.className += " responsive";
    if (flag === 1) {
      y.className += " responsive";
    }

  } else {


    if (x.className === "topnav responsive" && y.className === "subnav responsive") {
      flag = 1;
    } else if (x.className === "topnav responsive" && y.className !== "subnav responsive") {
      flag = 0;
    } else {

      y.className = "subnav";
    }

    x.className = "topnav";
    y.className = "subnav";
  }

}

function subnavFunction() {
  var y = document.getElementById("mySubnav");
  var x = document.getElementById("myTopnav");
  if (y.className === "subnav") {

    y.className += " responsive";

  } else {
    y.className = "subnav";
  }

}
html,
body {
  margin: 0;
  padding: 20px;
  height: 100%;
}

header h1 {
  margin: 0;
  display: inline;
}

header ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0px;
}

header ul li a {
  display: inline;
  padding-right: 20px;
  font-size: 18px;
  text-decoration: none;
  color: #444;
  transition: color 170ms ease-in-out, background-color 170ms ease-in-out;
}

header ul h1 a {
  padding-right: 20px;
  text-decoration: none;
  display: block;
  font-weight: normal;
  color: #444;
}


/* mouse over link */

header ul li a:hover {
  color: #999;
  text-decoration: none;
}


/* selected link */

header ul li a:active {
  color: #555;
  text-decoration: none;
}

.TitleHeader {
  color: #444;
  text-align: center;
  padding-top: 150px;
  font-family: "Times New Roman";
}

.footer {
  text-decoration: none;
}

.topnav header ul li a {
  display: inline;
  padding-bottom: 20px;
}

.topnav .icon {
  position: absolute;
  display: none;
  right: 10px;
  top: 10px;
  color: #555;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}

.footer,
.push {
  height: 50px;
  text-align: center;
  font-family: "Times New Roman";
}

@media screen and (max-width: 699px) {
  .topnav ul li a {
    display: none;
    padding: 10px;
  }
  .topnav .icon {
    display: inline;
    position: absolute;
    top: 45px;
    right: 50px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
  }
  .topnav.responsive .subnav .subIcon {
    display: inline-block;
    position: absolute;
    top: 75px;
    left: 100px;
  }
  header ul h1 a {
    display: block;
    text-align: center;
    -webkit-animation: fadein 1s;
  }
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@media screen and (max-width: 699px) {
  .topnav.responsive ul li a {
    float: none;
    display: inline-block;
    text-align: left;
    padding-left: 10px;
  }
  a.subIcon {
    margin-left: 30px;
  }
  .subnav.responsive .subIcon {
    transform: rotate(90deg);
    transition: all .25s ease-out;
  }
  .subnav .subIcon {
    transition: all .25s ease-out;
  }
  .topnav .subnav.responsive ul li a {
    display: block;
  }
  .topnav .subnav.responsive ul {
    padding-left: 10px;
  }
  .topnav .subnav ul li a {
    display: none;
  }
}

@media screen and (min-width: 700px) {
  .topnav ul li {
    display: none;
    display: inline-block;
    -webkit-animation: fadein 1s;
    display: visible;
  }
  header ul h1 a {
    display: inline;
  }
  .topnav .icon {
    display: none;
  }
  .subnav .subIcon {
    display: none;
  }
  .subnav ul li {
    display: none;
  }
  .room:hover .subnav ul li {
    display: inline;
  }
  .subnav ul {
    position: absolute;
    display: inline;
    float: left;
  }
  .subnav ul li a {
    padding-top: 10px;
    padding: 10px 20px;
  }
}

.GreyText {
  color: #777;
}
<!doctype html>
<html>

<head>

  <title> Home </title>

  <link href="mainCSS.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

  <div class="wrapper">
    <header>

      <div class="topnav" id="myTopnav">
        <!-- Whole navigation menu -->
        <ul>

          <h1 class="first"><a href="MyWebsiteCSS.html">UrbanAero</a></h1>
          <li class="room"><a href="#">Rooms</a>
            <div class="subnav" id="mySubnav">
              <ul class="boi">
                <li><a href="#">Living room</a></li><br>
                <li><a href="#">Dining room</a></li><br>
                <li><a href="#">Home office and Study</a></li><br>
                <li><a href="#">Bedroom</a></li>
                <a href="javascript:void(0);" class="subIcon" onclick="subnavFunction();"><i class="fa fa-caret-down" aria-hidden="true"></i></a>
              </ul>
            </div>
          </li>

          <li><a href="#">lighting</a></li>
          <li><a href="#">Accessories</a></li>
          <li><a class="GreyText" href="ContactCSS.html">Contact</a></li>
          <li><a class="GreyText" href="AboutCSS.html">About Us</a></li>
          <li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()"></li>
          <li><i class="fa fa-bars"></i></a>
          </li>

        </ul>

      </div>
    </header>




    <div class="push">

    </div>

  </div>

  <footer class="footer">&#0169;UrbanAero</footer>

</body>

</html>

1 个答案:

答案 0 :(得分：0)

在页边距和填充方面，浏览器对内联元素的处理方式有所不同。您可以在行内元素的左侧和右侧添加空间，但不能在行内元素的顶部或底部填充或边距处添加高度。

为了使填充有效，请将锚点更改为inline-block：

^(?:[A-Za-z \\s\\-]*|)$

更新代码 

header ul li a{
  display: inline-block;
}

var flag;
myFunction();

function myFunction() {

  var x = document.getElementById("myTopnav");
  var y = document.getElementById("mySubnav");

  if (x.className === "topnav") {

    x.className += " responsive";
    if (flag === 1) {
      y.className += " responsive";
    }

  } else {


    if (x.className === "topnav responsive" && y.className === "subnav responsive") {
      flag = 1;
    } else if (x.className === "topnav responsive" && y.className !== "subnav responsive") {
      flag = 0;
    } else {

      y.className = "subnav";
    }

    x.className = "topnav";
    y.className = "subnav";
  }

}

function subnavFunction() {
  var y = document.getElementById("mySubnav");
  var x = document.getElementById("myTopnav");
  if (y.className === "subnav") {

    y.className += " responsive";

  } else {
    y.className = "subnav";
  }

}
html,
body {
  margin: 0;
  padding: 20px;
  height: 100%;
}

header h1 {
  margin: 0;
  display: inline;
}

header ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0px;
}

header ul li a {
  display: inline-block;
  padding-right: 20px;
  font-size: 18px;
  text-decoration: none;
  color: #444;
  transition: color 170ms ease-in-out, background-color 170ms ease-in-out;
}

header ul h1 a {
  padding-right: 20px;
  text-decoration: none;
  display: block;
  font-weight: normal;
  color: #444;
}


/* mouse over link */

header ul li a:hover {
  color: #999;
  text-decoration: none;
}


/* selected link */

header ul li a:active {
  color: #555;
  text-decoration: none;
}

.TitleHeader {
  color: #444;
  text-align: center;
  padding-top: 150px;
  font-family: "Times New Roman";
}

.footer {
  text-decoration: none;
}

.topnav header ul li a {
  display: inline;
  padding-bottom: 20px;
}

.topnav .icon {
  position: absolute;
  display: none;
  right: 10px;
  top: 10px;
  color: #555;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}

.footer,
.push {
  height: 50px;
  text-align: center;
  font-family: "Times New Roman";
}

@media screen and (max-width: 699px) {
  .topnav ul li a {
    display: none;
    padding: 10px;
  }
  .topnav .icon {
    display: inline;
    position: absolute;
    top: 45px;
    right: 50px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
  }
  .topnav.responsive .subnav .subIcon {
    display: inline-block;
    position: absolute;
    top: 75px;
    left: 100px;
  }
  header ul h1 a {
    display: block;
    text-align: center;
    -webkit-animation: fadein 1s;
  }
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@media screen and (max-width: 699px) {
  .topnav.responsive ul li a {
    float: none;
    display: inline-block;
    text-align: left;
    padding-left: 10px;
  }
  a.subIcon {
    margin-left: 30px;
  }
  .subnav.responsive .subIcon {
    transform: rotate(90deg);
    transition: all .25s ease-out;
  }
  .subnav .subIcon {
    transition: all .25s ease-out;
  }
  .topnav .subnav.responsive ul li a {
    display: block;
  }
  .topnav .subnav.responsive ul {
    padding-left: 10px;
  }
  .topnav .subnav ul li a {
    display: none;
  }
}

@media screen and (min-width: 700px) {
  .topnav ul li {
    display: none;
    display: inline-block;
    -webkit-animation: fadein 1s;
    display: visible;
  }
  header ul h1 a {
    display: inline;
  }
  .topnav .icon {
    display: none;
  }
  .subnav .subIcon {
    display: none;
  }
  .subnav ul li {
    display: none;
  }
  .room:hover .subnav ul li {
    display: inline;
  }
  .subnav ul {
    position: absolute;
    display: inline;
    float: left;
  }
  .subnav ul li a {
    padding-top: 10px;
    padding: 10px 20px;
  }
}

.GreyText {
  color: #777;
}

相关问题
最新问题