html - 元素的放置

Question

请查看我发布的 fiddle ，并告诉我如何使菜单图标(三个星号 (*))出现在欢迎用户菜单旁边。即，在同一条线上，而不是在其下方。

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>

`

Answer 1

为 ul 添加 display: inline-block; Demo

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