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

Question

我正在创建一个自定义菜单（但也使用bootstrap作为前端引擎），并且无法覆盖默认的用户代理样式表（目前正在测试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>

---

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

Display: Inline block - What is that space?

How to remove the space between inline-block elements?

Ignore whitespace in HTML

Answer 2

你的问题是inline-block元素之间的空格。已知这些会打破预期的对齐。因此，为了解决这个问题，您可以进行一些HTML更改，或者将font-size: 0;应用于父级（如果需要，可以使用子级的值恢复它）。您可以查看CSS-tricks: Fighting the space between inline block elements以获取更多信息。

但更简单的解决方案是在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;
}