获取一个带有潜台词的图标，然后在同一行上列出一个列表？

Posted 2023-02-22

【中文标题】获取一个带有潜台词的图标，然后在同一行上列出一个列表？

【英文标题】：Get an Icon with subtext and then a list on the same line?

【发布时间】：2019-03-29 08:08:19

【问题描述】：

我试图简单地制作一个带有潜台词的图标，然后将菜单选项全部放在同一行。但是，它始终将菜单选项定位在不同的行上。 即，我的 html 如下所示： 图标（带字幕） **空间 测试1测试2等...

    .wrapper 
      display: inline-block;
      white-space: nowrap;
    
    
    ul li 
      display: inline;
      white-space: nowrap;
    

		<div>
				<div className="wrapper">
					<div className="logo">
			<a href="/"><img   src=Logo /></a>
					</div>
					<div className="text">
						Triangular
					</div>
				</div>
				<ul>					
					<li><a href="/">Test1</a></li>
					<li><a href="/">Test2</a></li>
					<li><a href="/">Test3</a></li>
					<li><a href="/">Sit amet</a></li>				
				</ul>
			</div>

【参考方案1】：

因为您没有内联显示 .wrapper 的子项（徽标和文本）。与 ul 相同。

以下 CSS 更改将帮助您修复它。

.wrapper, .wrapper
  display: inline-block;
  white-space: nowrap;


ul, li 
  display: inline;
  white-space: nowrap;

.wrapper, .wrapper 
  display: inline-block;
  white-space: nowrap;
  vertical-align:top;


ul, li 
  display: inline;
  white-space: nowrap;

<div>
            <div class="wrapper">
                <div class="logo">
        <a href="/"><img   src=Logo /></a>
                </div>
                <div class="text">
                    Triangular
                </div>
            </div>
            <ul>                    
                <li><a href="/">Test1</a></li>
                <li><a href="/">Test2</a></li>
                <li><a href="/">Test3</a></li>
                <li><a href="/">Sit amet</a></li>               
            </ul>
        </div>

你也可以测试一下here。

更新 1：

我已将潜台词移至徽标下方。

测试一下here

【讨论】：

现在将三角形放在一边，而不是作为徽标下方的潜台词。

【参考方案2】：

这是我为使其正常工作所做的工作，希望这是您所需要的。

我把 css 变成了这样：

 li,.wrapper 
     float: left;
     top: 0px;
     margin-left:20px;
 

https://jsfiddle.net/xJoeTheHobox/6ds37v8m/47/