在同一行中对齐标题和普通文本

Question

我试图对齐标题订单管理： 和普通文本在同一行中以管理员，注销登录。 它是唯一的一个。 link

但是当我整合它。它不对齐，你可以看到here

<div id="dialog-form" title="Order Details"> 
 
    <p class="validateTips">Spicy Sandwitch</p> 
 
    <p class="validateTips">More</p> 
 
    <form> 
 
    <fieldset> 
 
     <label for="name">More Comments</label> 
 
     <p class="validateTips">Sandwitch only lettuce</p> 
 
     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
 
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
 
    </fieldset> 
 
    </form> 
 
</div> 
 
<div id="users-contain" class="ui-widget"> 
 
<div class="header"> 
 
    <img src="img/logo.png" alt="logo" /> 
 
    <h1>Cafe name</h1> 
 
</div> 
 
<p style="clear: both;"></p> 
 
    <!--<h1>Orders Management:</h1>--> 
 
    <div style="border-bottom:1px ;"> 
 
<div class="left"><h1>Orders Management:</h1></div> 
 
<div class="right"><span class="blackText">Logged in as: </span>&nbsp;<span class="blueText">Admin</span>&nbsp;<span class="blackText">,</span>&nbsp;<span class="redText">Logout</span> 
 
</div> 
 
</div> 
 
<!-- --> 
 
    <table id="users" class="ui-widget ui-widget-content"> 
 
    <thead> 
 
     <tr class="ui-widget-header "> 
 
     <th>Name/Surname</th> 
 
     <th>Address</th> 
 
     <th>Telephone</th> 
 
     <th>Time/Date</th> 
 
     <th>Order Details</th> 
 
     <th>Delivered</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John Doe</td> 
 
     <td>Lykavitou 12, 2109 Aglantzia</td> 
 
     <td>99123456</td> 
 
     <td>21:00 21/11/16</td> 
 
     <td> 
 

 
      <button id="create-user-1" class="showDialog">Show</button> 
 
     </td> 
 
     <td align="center"> 
 
      <input type="checkbox" class="case" name="case" value="1" /> 
 
     </tr> 
 
     <tr> 
 
     <td>Andreas Georgiou</td> 
 
     <td>Grigori Auxentiou 12, 2109 Aglantzia</td> 
 
     <td>99654789</td> 
 
     <td>20:00 21/11/16</td> 
 
     <td> 
 
      <button id="create-user-2" class="showDialog">Show</button> 
 
     </td> 
 
     <td align="center"> 
 
      <input type="checkbox" class="case" name="case" value="1" /> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

，我试图让退出的文字是将重定向到一个HTML页面在同一文件夹中的超链接。没有工作。

Answer 1

为了使注销和管理员<div>小号元素出现在同一行，他们需要通过容器不默认（块元素如<div>，<p>标记）填写的线的宽度被包含。

更换div元素管理员和注销与行内元素（如<span>将允许您创建上线/行一起出现的内容。

像<div>意志坚强的block元素在默认情况下都在开始换行符和填补线的宽度。

它会做到这一点，除非它有它的显示属性设置为inline-block，而不是默认block，但你也必须提供一个宽度在这种情况下，'格。

由于您已将显示设置为inline-block，所以您只需提供与宽度属性相同的< div>。

Answer 2

尝试增加宽度div#users-contain。仅为300像素的宽度，只有这么大的空间有