2

我试图简单地制作一个带有潜台词的图标，然后将菜单选项全部放在同一行上。但是，它始终将菜单选项定位在不同的行上。即，我的 html 如下所示： Icon(w/subtext)
**space Test1 Test2 etc...

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

4

2 回答 2

1

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

我使css看起来像这样：

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

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

于 2018-10-24T20:17:54.507 回答
0

因为您没有内联显示 .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>

您也可以在这里进行测试。

更新 1：

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

在这里测试

于 2018-10-24T20:29:31.620 回答