Question

我有以下由Joomla菜单管理器创建的HTML，这意味着我无法轻易地对其进行调整。所以我需要有办法解决它。请不要建议改变它的构建方式。

所以这是HTML：

<ul>
  <li><a href="#"><i class="fa fa-home"></i>Short Link</a></li>
  <li><a href="#"><i class="fa fa-home"></i>Short Link</a></li>
  <li><a href="#"><i class="fa fa-home"></i>Long Link That is Longer</a></li>  
</ul>

显然那里有链接而没有#但是为了这个问题没有必要。

这与此CSS结合使用：

ul {
  width:300px;
}
li {
  width: 32%;
  display: inline-block;
  text-align: center;
}
a {
  display: block;
  font-size: 0.9rem;
  color: #666;
}
i.fa {
  display: block;
  font-size: 2rem;
}

创建这个小提琴：https://jsfiddle.net/hg20dhwe/

问题

当某个菜单项有两个以上的单词或两个长单词时，文本和图标的对齐方式完全错误。请看看小提琴，你可以立即看到我的意思。

我可以用CSS做什么来使它始终正确对齐？正确地说，我的意思是好看。因为对齐显然已经根据CSS的规则工作了，但在这种情况下看起来很难看。

谢谢大家。

编辑：首选适用于旧浏览器的解决方案。

更新

新小提琴：https://jsfiddle.net/Lgdda4zt/

设置最大宽度的新小提琴：https://jsfiddle.net/Lgdda4zt/1/

以小屏幕宽度查看，否则您将看不到问题。菜单通常是350px宽度，但这是由网格系统完成的，而不是硬编码到菜单中。或者打开第二小提琴链接

这具有来自Joomla结构的更准确的表示。再次没有真正的联系，但这无关紧要。我相信所涉及的所有造型现在都是小提琴的一部分。

对于已发布回复，评论，解决方案的所有人，非常感谢您的努力，我很抱歉没有提供合适的工具（好小提琴）。

Answer 1

您可以在display:flex;代码

上使用ul

ul {
  width:300px;
  display: flex;
}

See jsfiddle 1

或者您也可以在float:left;代码

上使用li

li {
  width: 32%;
  display: inline-block;
  text-align: center;
  float: left;
  list-style-type: none;
}

See jsfiddle 2

Answer 2

由于displayed为inline-block，因此您可以使用vertical-align和align，然后使用nth-child selector选择li，然后对齐，如下所示，

li:nth-child(3){
  vertical-align:top;
}

ul {
  width:300px;
}
li {
  width: 32%;
  display: inline-block;
  text-align: center;
}
a {
  display: block;
  font-size: 0.9rem;
  color: #666;
}
i.fa {
  display: block;
  font-size: 2rem;
}
ul > li:nth-child(3){
  vertical-align:top;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
  <li><a href="#"><i class="fa fa-home"></i>Short Link</a></li>
  <li><a href="#"><i class="fa fa-home"></i>Short Link</a></li>
  <li><a href="#"><i class="fa fa-home"></i>Long Link That is Longer</a></li>
</ul>

Answer 3

您可以根据需要对齐图标和文字：

li {
    position: relative;
    padding-left: 2.2rem;
}

.fa {
    position: absolute;
    top: 0;
    left: 0;
}

更新

li {
    display: table-cell;
}

a, .fa {
    vertical-align: top;
    display: inline-block;
}

Answer 4

你可以使用

li {
  width: 32%;
  display: block;
  float: right;
  text-align: center;
  }

但也许您对此代码有一些问题。如果使用此代码，并在列表中显示项目有任何问题，请在此处发表评论并告诉您该怎么做。

Answer 5

我最终重写了它并选择了Flex属性。这导致了以下CSS＆amp; HTML：

＆＃13;

.nav {max-width:350px;}
/* The above is only for this fiddle and not in Joomla */

.nav {
    margin-bottom: 20px;
    margin-left: 0;
    list-style: none;
}
ul.nav.menu {
    text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
ul.nav.menu li {
  border-bottom: 1px solid #c5c5c5;
  margin: 0 15px 10px 15px;
  padding: 0 0 10px 0;
  line-height:20px;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
  /* Use media queries for proper width settings */
  width: calc(33% - 30px);
  /* -30px because of the margin set above */
}
ul.nav.menu a {
    font-size: 0.9rem;
    color: #666;
}
.nav > li > a {
  font-size: 0.9rem;
  color: #666;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
  -moz-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
}
i {
  font-size: 2rem;
}

/*I need to counter this fontawesome 'inline-block' part as in Joomla it does not use fontawesome but flaticon*/

.fa {display:block;font-size:2rem;}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
	<ul class="nav menu">
		<li class="item-569">
			<a href="#"><i class="fa fa-home flaticon-iconname"></i> Short Link</a>
		</li>		
		<li class="item-586">
			<a href="#"><i class="fa fa-home flaticon-iconname"></i> Long Link that is longer</a>
		</li>
		<li class="item-587">
			<a href="#"><i class="fa fa-home flaticon-iconname"></i> Short Link</a>
		</li>
		<li class="item-588">
			<a href="#"><i class="fa fa-home flaticon-iconname"></i> Short Link</a>
		</li>
		<li class="item-589">
			<a href="#"><i class="fa fa-home flaticon-iconname"></i> Short Link</a>
		</li>
		<li class="item-590">
			<a href="#"><i class="fa fa-home flaticon-iconname"></i> Short Link</a>
		</li>
	</ul>

＆＃13;

在上面的代码snippit或JSFiddle上看到它的全部荣耀：https://jsfiddle.net/Lgdda4zt/6/

如何将图标与单行和多行对齐

5 个答案: