在同一行中對齊標題和普通文本

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像素的寬度，只有這麼大的空間有