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

Posted 2023-03-05

【中文标题】如何将复选框放在中间？现在复选框倾斜了？

【英文标题】：how to put the checkbox to the middle ? now the checkbox is skewed?

【发布时间】：2022-01-20 01:37:12

【问题描述】：

我是 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。

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

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

【问题讨论】：

在什么中间，垂直和/或水平？

需要 CSS 的其余部分。从您发布的图片来看，您似乎有一个或多个外部样式表，即<link href='style.css' rel='stylesheet'>

@zer00ne : 对不起我的错误，我已经添加了我所有的 css，你能再看看并告诉我更多关于我的问题吗？

@nguyencuc2286 我已经发布了您的代码，而不是试图解释如何正确地自己做这件事。如果你有时间，我建议你阅读minimal reproducible example。对于 CSS，只需在 CSS 编辑器框中添加您自己所做的更改，并将所有外部样式表添加到 HTML 编辑器框中：<link...> 确保href 是绝对路径：例如。 href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"

【参考方案1】：

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

要仅在移动视图中隐藏 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/