时间戳

首页 > 解决方案 > 弹性框菜单对齐问题

html - 弹性框菜单对齐问题

问题描述

一直在研究和调整以下代码，但让我无法将文本与均匀间距对齐。我可以使用表格元素轻松完成此任务，但我想掌握 Flex Box 方法。任何帮助表示赞赏。

文本对齐问题的屏幕截图：

链接到文本对齐屏幕截图

#navbar-menu-button-mobile,
#navbar-container-mobile {
	display: flex !important;
}
/* === Navigation Drop-down Menu === */
#navbar-container-mobile {
	margin-top: 74px;
	padding: 0 1%;
	background: white;
}

.navbar-menu-item-mobile {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="navbar-container-mobile" class="container">
	<div id="navbar-collapse-mobile" class="collapse w-100">
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-calendar"></div><div class="pr-2"></div><div>Calendar</div>
		</div>
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-compass"></div><div class="pr-2"></div><div>Locations</div>
		</div>
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-heartbeat"></div><div class="pr-2"></div><div>Physicians</div>
		</div>
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-random"></div><div class="pr-2"></div><div>Trades</div>
		</div>
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-user"></div><div class="pr-2"></div><div>Personal</div>
		</div>
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-cog"></div><div class="pr-2"></div><div>Settings</div>
		</div>
		<div class="dropdown-divider"></div>
		<div class="navbar-menu-item-mobile">
			<div class="fa fa-sign-out"></div><div class="pr-2"></div><div>Sign Out</div>
		</div>
	</div>
</div>

标签： htmlcssflexbox

解决方案

下面的示例假设您使用的是 FontAweosme v4，请遵循此标记：

<div class="navbar-menu-item-mobile">
   <i class="menu icons"></i>
   <div>Menu label</div>
</div>

您需要为图标设置宽度、边距：

.navbar-menu-item-mobile .fa {
  width: 15px;
  margin-right: 10px;
}

例子：

#navbar-menu-button-mobile,
#navbar-container-mobile {
  display: flex !important;
}

/* Add this */
.navbar-menu-item-mobile .fa {
  width: 15px;
  margin-right: 10px;
}

/* === Navigation Drop-down Menu === */

#navbar-container-mobile {
  margin-top: 74px;
  padding: 0 1%;
  background: white;
}

.navbar-menu-item-mobile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="navbar-container-mobile" class="container">
  <!-- Removed collapse class for testing -->
  <div id="navbar-collapse-mobile" class="w-100">
    <div class="navbar-menu-item-mobile">
      <i class="fa fa-calendar"></i>
      <div>Calendar</div>
    </div>
    <div class="navbar-menu-item-mobile">
      <i class="fa fa-compass"></i>
      <div>Locations</div>
    </div>
    <div class="navbar-menu-item-mobile">
      <i class="fa fa-heartbeat"></i>
      <div>Physicians</div>
    </div>
    <div class="navbar-menu-item-mobile">
      <i class="fa fa-random"></i>
      <div>Trades</div>
    </div>
    <div class="navbar-menu-item-mobile">
      <i class="fa fa-user"></i>
      <div>Personal</div>
    </div>
    <div class="navbar-menu-item-mobile">
      <div class="fa fa-cog"></div>
      <div>Settings</div>
    </div>
    <div class="dropdown-divider"></div>
    <div class="navbar-menu-item-mobile">
      <i class="fa fa-sign-out "></i>
      <div>Sign Out</div>
    </div>
  </div>
</div>

推荐阅读