Question

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

在我的示例中，我有一个 <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/styles.css" rel="stylesheet" />  <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> ----------------------------------------------------  <script src="js/bootstrap.min.js" type="text/javascript"></script>和四个菜单项（每个应该是CSS中的25％）。这是JSFIDDLE：JSFIDDLE

这是我的代码：

HTML：

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;
}

CSS：

with
   -- distinct values
   scolor as (select distinct color from mytable),
   ssize as  (select distinct size  from mytable),
   sshape as (select distinct shape from mytable),
   sarea as  (select distinct area  from mytable)
select
   case
      when (select count(*) from scolor) > 1
         then 'mixed'
      when (select count(*) from scolor) = 1 and (select * from scolor) is null
         then null
      else
         (select * from scolor)
   end,
   case
      when (select count(*) from ssize) > 1
         then 'mixed'
      when (select count(*) from ssize) = 1 and (select * from ssize) is null
         then null
      else
         (select * from ssize)
   end,
   case
      when (select count(*) from sshape) > 1
         then 'mixed'
      when (select count(*) from sshape) = 1 and (select * from sshape) is null
         then null
      else
         (select * from sshape)
   end,
   case
      when (select count(*) from sarea) > 1
         then 'mixed'
      when (select count(*) from sarea) = 1 and (select * from sarea) is null
         then null
      else
         (select * from sarea)
   end
from mytable
limit 1;

Answer 1

您正面临空格问题，而不是您想的填充/边距。您可以将Original: This_is my code !@# characters are not $ allowed% remove spaces ^&*(){}[]/_:;,.?/"' Desired : This_is-my-code-----characters-are-not---allowed--remove-sp‌aces-----------_----‌---- Result : This_is-my-code-----characters-are-not---allowed--remove-spaces-----------_--------添加到容器中以解决问题

＆＃13;

display:flex

＆＃13;

@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;
}

＆＃13;

或<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>技巧（适用于旧浏览器）

＆＃13;

font-size:0

＆＃13;

@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;
}

＆＃13;

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

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

设置float：left;

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

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

3 个答案: