在图像徽标后对齐标题和正常文本

Question

我正在尝试对齐标头订单管理： 和普通文本登录为：Admin，Logout在同一行。 当它是唯一一个时它起作用。 link

但是当我整合它时。它没有对齐，因为您可以看到here

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我正在努力使注销文本成为一个超链接，将重定向到同一文件夹中的html页面。没用。

Answer 1

为了使Logout和Admin <div>元素出现在一行中，默认情况下，它们需要由未填写行宽的容器包含（块 <div>，<p>代码等元素。

使用内嵌元素替换Admin和Logout的div元素（例如<span>将允许您创建一行/一行中显示的内容。

block之类的<div>元素默认情况下都会在换行符上开始，而会填充该行的宽度。

除非将display属性设置为inline-block而不是默认block，否则它会执行此操作，但在这种情况下你还必须为`div提供宽度。

由于您已将显示设置为inline-block，所以您只需提供具有width属性的相同< div＆gt;`。

Answer 2

尝试增加div#users-contain的宽度。宽度只有300px，那里只有很多空间