Question

我试图简单地使图标带有文本，然后将菜单选项全部置于同一行。但是，它始终将菜单选项放置在不同的行上。即，我的html如下所示：图标（带子文本）
**空间 Test1 Test2等...

    .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

这就是我要做的，希望这就是您所需要的。

我使CSS看起来像这样：

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

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

Answer 2

因为您没有内联显示.wrapper的子级（徽标和文本）。与ul一样。

在CSS中进行以下更改将有助于您对其进行修复。

SELECT COUNT(id) as count, pic_id 
FROM user_pictures 
GROUP BY pic_id 
HAVING count(user_id) = 1

.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;
}

您也可以here对其进行测试。

更新1：

我将潜台词移到徽标下方。

测试here

获取带有文本的图标，然后在同一行列出一个列表？

2 个答案: