css 从nav元素中删除未填充的空间（间隙）

Posted 2021-05-13

/**
 * The Default Genesis styles have a bug which causes extra unwanted
 * space to display in the nav menu bar elements. This will remove the
 * extra space cross-browser. The reason for the strange .001px font size
 * is due to a bug on older Andorid devices.
 *  
 * Note: I've used the default Genesis styles here as an example. The only
 * actual change is the font-size rule on both selectors.
 *
 * Reference link:   http://css-tricks.com/fighting-the-space-between-inline-block-elements/
 * Android Bug link: http://codepen.io/SelenIT/pen/HIika
 */
 
.genesis-nav-menu {
  clear: both;
  font-size: .001px;
  line-height: 1;
  width: 100%;
}
 
.genesis-nav-menu .menu-item {
  display: inline-block;
  font-size: 16px;
  text-align: left;
}