Question

在我使用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中使用CSS。在我使用基于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>

现在，搜索框决定它将出现在下一行，Logout也出现在第二行，如下所示：

MyProfile         Link1          Link2      
 |   search box           |                                                  Logout

赞赏jQuery自动完成支持后如何水平对齐的任何帮助。

Answer 1

我按照SO post中接受的答案采用了这种方法。这似乎解决了我的问题。可以在应用程序中另外更改.ui-widget（jQuery div元素）的CSS属性（对于字体大小等），这是您可以从包含该依赖项中删除问题的另一种方法。

使用我的topNav混合jQuery的UI小部件会导致水平对齐

1 个答案: