默认用户代理样式表不覆盖

Question

我正在创建一个自定义菜单(同时也使用引导作为前端引擎)，并且不能覆盖默认的用户代理样式表(目前正在chrome上测试)。假设我的菜单有一个div，我想插入菜单项(所有菜单项的宽度相等)。问题是，有一个默认的填充/边距，我不能将它们放在同一行中。

在我的示例中，我有一个div和四个菜单项(每个菜单项应该和CSS中的25%一样)。这是JSFIDDLE：JSFIDDLE

这是我的代码：

HTML：

<!-- LOAD CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- LOAD JQUERY -->
<script src="js/jquery-3.2.1.min.js"></script>

----------------------------------------------------

<header>
    <div class="container">
        <nav class="mega-menu">
            <ul>
                <li class="test-class">1</li>                   
                <li class="test-class">1</li>                   
                <li class="test-class">1</li>                   
                <li class="test-class">1</li>                   
            </ul>
        </nav>
    </div>
</header>

----------------------------------------------------
<!-- LOAD JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>

CSS：

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

* {
   margin:0;
   padding:0;
}

.mega-menu {
    margin-top: 32px;
    position: relative;
    z-index: 100;
    background-color: yellow;
    border: 1px solid black;
}
.mega-menu>ul {
    text-align: center;
}
.mega-menu>ul>li {
    display: inline-block;
    font-size: 13px;
    line-height: 15px;
    vertical-align: top;
    width: 25%;
}


.test-class {
    background-color: red;
    border: 1px solid blue;
}

Answer 1

您面临的是空白问题，而不是您所认为的填充/空白。可以将display:flex添加到容器中以解决此问题。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

/* custom css */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
}

.mega-menu {
  margin-top: 32px;
  position: relative;
  z-index: 100;
  background-color: yellow;
  border: 1px solid black;
}

.mega-menu>ul {
  text-align: center;
  display: flex;
}

.mega-menu>ul>li {
  display: inline-block;
  font-size: 13px;
  line-height: 15px;
  vertical-align: top;
  width: 25%;
}

.test-class {
  background-color: red;
  border: 1px solid blue;
}

<header>
  <div class="container">
    <nav class="mega-menu">
      <ul>
        <li class="test-class">1</li>
        <li class="test-class">1</li>
        <li class="test-class">1</li>
        <li class="test-class">1</li>
      </ul>
    </nav>
  </div>
</header>

​

或font-size:0技巧(用于旧浏览器)

​

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

/* custom css */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
}

.mega-menu {
  margin-top: 32px;
  position: relative;
  z-index: 100;
  background-color: yellow;
  border: 1px solid black;
}

.mega-menu>ul {
  text-align: center;
  font-size:0;
}

.mega-menu>ul>li {
  display: inline-block;
  font-size: 13px;
  line-height: 15px;
  vertical-align: top;
  width: 25%;
}

.test-class {
  background-color: red;
  border: 1px solid blue;
}

<header>
  <div class="container">
    <nav class="mega-menu">
      <ul>
        <li class="test-class">1</li>
        <li class="test-class">1</li>
        <li class="test-class">1</li>
        <li class="test-class">1</li>
      </ul>
    </nav>
  </div>
</header>

​

有关更多解决方案和解释的链接：

显示:内联块-那是什么空间？

如何删除内联块元素之间的空间？

忽略HTML中的空白

Answer 2

您的问题是inline-block元素之间的空白。这些都是已知的破坏预期的对齐。因此，为了解决这个问题，您可以做一些HTML更改，或者将font-size: 0;应用到父程序(如果需要的话，用一个值来还原它)，.Your可以检查CSS-技巧:在内联块元素之间争夺空间。以获得更多信息。

不过，更简单的解决方案是在display: flex上使用ul。如果父程序是一个柔性盒，那么它的子节点将在一行(或列中，如果您将其设置为)中对齐，除了自定义添加的边距之外，没有任何空格。

​

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


/* custom css */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

* {
   margin:0;
   padding:0;
}

.mega-menu {
	margin-top: 32px;
	position: relative;
	z-index: 100;
	background-color: yellow;
	border: 1px solid black;
}
.mega-menu>ul {
	text-align: center;
    display: flex;
}
.mega-menu>ul>li {
	display: inline-block;
	font-size: 13px;
	line-height: 15px;
	vertical-align: top;
	width: 25%;
}


.test-class {
	background-color: red;
	border: 1px solid blue;
}

<header>
        <div class="container">
			<nav class="mega-menu">
				<ul>
					<li class="test-class">1</li>					
					<li class="test-class">1</li>					
					<li class="test-class">1</li>					
					<li class="test-class">1</li>					
				</ul>
			</nav>
		</div>
	</header>

​

Answer 3

设置浮动:左；

.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}