javascript - 将 jQuery 的 UI 小部件与我的 topNav 混合会破坏水平对齐

Question

在我使用 jQuery 和 jQuery UI(分别为 1.10.2 和 1.10.4)的 Web 应用程序中，我在 /js/jquery-ui-1.10.4/css/ui-lightness 中使用 jQuery CSS 中的 CSS/jquery-ui-1.10.4.min.css 来自 jQuery 站点的 zip 文件。在我使用基于 jQuery 的自动完成功能之前，我有一个像这样的 topNav 栏:

MyProfile         Link1          Link2      |   search box           |     Logout

我的搜索框是 300px，我的字体是 12px，上面 div 容器的宽度是 700px 在我添加 jQuery 自动完成支持之前，它是这样的这个:

<div class="topNav">
    <div class="left">
          <a href...>MyProfile</a>>&nbsp&nbsp
          <a href...>Link1</a>>&nbsp&nbsp
          <a href...>Link2</a>>&nbsp&nbsp
    </div>
    <input id="searchBox" name="searchBox" type="search" >
    <div class="right">
          <a href...>Logout</a>
    </div>
</div>

然后一切都很好对齐(所有 topNav 在一行中)。

现在，像这样添加 jQuery 支持后:

<div class="topNav">
    <div class="left">
          <a href...>MyProfile</a>>&nbsp&nbsp
          <a href...>Link1</a>>&nbsp&nbsp
          <a href...>Link2</a>>&nbsp&nbsp
    </div>

     <!-- div-ing the input searchBox was the only change: -->
     <div class="ui-widget">
           <input id="searchBox" name="searchBox" type="search" >
     </div>


    <div class="right">
          <a href...>Logout</a>
    </div>
</div>

现在，搜索框已经决定它会出现在下一行，注销也出现在第二行，像这样:

MyProfile         Link1          Link2      
 |   search box           |                                                  Logout

感谢任何有关在 jQuery 自动完成支持后如何水平对齐的帮助。

Answer 1

我遵循了这个 SO post 中接受的答案中的方法.这似乎已经解决了我的问题。 .ui-widget(jQuery div 元素)的 CSS 属性可以在您的应用程序中额外更改(用于字体大小等)，这是您可以消除包含该依赖项的问题的另一种方式。