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

Question

我试图简单地制作一个带有潜台词的图标，然后将菜单选项全部放在同一行。但是，它始终将菜单选项定位在不同的行上。 即，我的 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 height="35" width="35" src={Logo} alt="TriLogo"/></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>

Answer 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 height="35" width="35" src={Logo} alt="TriLogo"/></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

Answer 2

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

我把 css 变成了这样：

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

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