html - 如何将复选框放在中间？现在复选框倾斜了？

Question

我是 html css 和 javascript 的新手，这是我的问题。

在 中styles.css，我编码隐藏nav__mobile，使用如下变换：

#nav__mobile {
  ... 
  transform: translateX(-100%);
}

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

html {
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
}

.clear {
  clear: both;
}

.text-white {
  color: #fff !important;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}


/*the gia*/

.row::after {
  content: "";
  display: block;
  clear: both;
}

#main {}

#header {
  height: 46px;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#nav {
  display: inline-block;
}

#nav>li {
  display: inline-block;
}

#nav li {
  position: relative;
}

#nav>li>a {
  color: #fff;
  text-transform: uppercase;
}

#nav li a {
  text-decoration: none;
  line-height: 46px;
  padding: 0 24px;
  display: block;
}

#nav .subnav li:hover a,
#nav>li:hover>a {
  color: #000;
  background-color: #ccc;
}

#nav,
.subnav {
  list-style-type: none;
}

#nav li:hover .subnav {
  display: block;
}

#nav .subnav {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  top: 100%;
  left: 0;
}

#nav .subnav a {
  color: #000;
  padding: 0 16px;
}

#nav .nav-arrow-down {
  font-size: 16px;
}

#header .search-btn {
  float: right;
  padding: 12px 24px;
  position: absolute;
  top: 0;
  right: 12px;
}

#header .search-icon {
  color: #0fade9;
  font-size: 16px;
}

#header .search-btn:hover {
  background-color: #f44336;
  cursor: pointer;
}


/* mobile nav */

.nav_bars-btn {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 8px;
  margin-top: 4px;
  display: inline-block;
  display: none;
}

@media (max-width: 1023px) {
  .nav_bars-btn {
    display: inline-block;
  }
  #nav {
    display: none;
  }
}

.nav__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

#nav__mobile {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  transform: translateX(-100%);
}

.nav__mobile-close {
  width: 28px;
  height: 28px;
  color: #666;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.nav__mobile-link {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 8px 0;
  font-size: 1.4rem;
}

.nav__input~h1 {
  color: red;
}

<div class="search-btn">
  <i class="search-icon ti-search fa fa-search"></i>
</div>

<input type="checkbox" name="" id="nav-mobile-input">
<div class="nav__overlay"></div>

<!-- navigation for mobile -->
<ul id="nav__mobile">
  <div class="nav__mobile-close">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
  </div>
  <li><a href="#" class="nav__mobile-link">Home</a></li>
  <li><a href="#band" class="nav__mobile-link">Bane</a>
  </li>
  <li><a href="#tour" class="nav__mobile-link">Tour</a>
  </li>
  <li><a href="#contact" class="nav__mobile-link">Contact</a></li>
</ul>

所以它隐藏了 nav__mobile。

我的问题是，当它显示复选框时，它是倾斜的，正如您在这张图片中看到的那样。

那么，你能告诉我为什么会这样吗？以及如何解决这个问题？我希望复选框位于中间。非常感谢您的宝贵时间。

Answer 1

建议display:none在隐藏 div 时使用。

要仅在移动视图中隐藏 div，您可以使用媒体查询。

https://getbootstrap.com/docs/4.0/layout/overview/

如果你想将复选框设置在中间，也许 flexbox 的概念会对你有所帮助。

它会是这样的。

<div style="width:100vw;display:flex;justify-content: center;">
    <input type="checkbox" name="" id="nav-mobile-input" />
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/

另外，我建议你玩 Flexbox Froggy！您可以通过游戏了解更多关于如何显示元素的信息。

https://flexboxfroggy.com/