jQuery中的混合's的UI小部件与我的topNav扼杀了水平对齐

Mixing in jQuery's UI widget with my topNav kills horizontal alignment

本文关键字：topNav 我的 对齐 水平 小部 混合 UI jQuery      更新时间：2023-09-26

在我使用jQuery和jQuery UI（分别为1.10.2和1.10.4）的web应用程序中，我使用了jQuery站点zip文件的/js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css中的jQuery CSS。在我使用基于jQuery的自动完成功能之前，我有一个类似的顶部导航栏：

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自动完成支持后如何水平对齐有任何帮助，我们将不胜感激。

我遵循了这篇SO文章中接受的答案中的方法。这似乎解决了我的问题。.ui-widget（jQuery-div元素）的CSS属性可以在应用程序中进行额外更改（字体大小等），这是消除依赖关系的另一种方法。

相关文章：