html - 放置物品

请看一下我发布的小提琴，并告诉我如何使菜单图标（三个星号（*））显示在欢迎用户菜单旁边。也就是说，在同一条线上，而不是在其下方。

enter link description here

这是一个代码片段：

/*DROPDOWN FUNCTIONALITY*/
ul {
	padding:0;
	margin:0
}
a {
	display:block;
	text-decoration: none;
}
li {
	display:block;
	float:left;
}
li ul li {
	float:none;
}
li ul {
	display:none;
	position:absolute;
	z-index:1
}
li:hover ul {
	display:block;
}

/*DROPDOWN STYLING:*/
#menu {
	height:30px
}
#menu a {
	color:#024E67;
	padding:10px 15px 10px 15px;
}
#menu a:hover {
	color:#ffffff;
}
#menu li {
	background-color:#FFF;
	margin-left:-1px
}
#menu li:hover {
	background-color:#61b4cf
}
i {
  margin-right: 15px;
}

<nav>
    	<div id="UserSettings" name="UserSettings" class="UserSettings">
        <!-- offer welcome message to user logged in -->
        <div class="welcomeText" id="welcomeText" name="welcomeText">
        <label>Welcome SuperUser</label>
          <ul id="menu">
          <li>
            <a href="#"><i class="fa fa-bars" title="Menu"></i>***</a>
              <ul>
              <li><a href="#"><i class="fa fa-cog" title="Preferences"></i>Preferences</a></li>
              <li><a href="#"><i class="fa fa-user" title="Active Sessions"></i>Active Sessions</a></li>
              <li><a href="#"><i class="fa fa-lock" title="Change Password"></i>Change Password</a></li>
              </ul>
          </li>
          </ul>
        </div>
     </div>

`

最佳答案

为display: inline-block; Demo添加ul

ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

关于html - 放置物品，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35312513/