在容器内输入对齐

Question

I have such an issue: There are two inputs in the container: the text field and the submit button. 我有这样一个问题：容器中有两个输入：文本字段和提交按钮。 The problem is that when the text is changed by the locale (For example from English to French), the button gets stratched and overlaps the text field. 问题是当文本被区域设置更改时（例如从英语到法语），该按钮会被刻录并重叠文本字段。 Here are the examples: 以下是示例：

English: 英语：

French: 法国：

Is there any way, so the length of the search field will fit the container automatically? 有什么办法，所以搜索字段的长度会自动适合容器吗？

The code for this container is like that: 这个容器的代码是这样的：

  <div id="searchContainer">
    <input type="text" id="searchField" class="search" name="searchQ" />
    <?php echo $this->searchButton; ?>
  </div>

Answer 1

I had a similar issue when styling a multi-lingual form myself, and while I never found an optimal solution, I'll share what I ended up doing in case it helps. 我自己设计多语言形式时遇到了类似的问题，虽然我从未找到最佳解决方案，但我会分享我最终做的事情以防万一。

Unfortunately, styling dynamic forms is rarely easy and sometimes impossible. 不幸的是，样式动态表单很少容易，有时甚至是不可能的。 You can, however, style the input field based on the language of the page. 但是，您可以根据页面的语言设置输入字段的样式。 First make sure the page html reflects the language you are using (i generate this based on language using server side code, in your case it should be a straight forward php echo statement): 首先确保页面html反映了您正在使用的语言（我使用服务器端代码生成此语言，在您的情况下，它应该是一个直接的php echo语句）：

<body lang="en">

Next, select your text input based on the language 接下来，根据语言选择文本输入

#searchField {
    width: 80%; /* default width */
}
body[lang|="en"] #searchField {
    width: 70%; /* make space for english button */
}

There are multiple other ways of selecting depending on language, check out http://www.w3.org/International/questions/qa-css-lang 根据语言还有多种其他选择方式，请查看http://www.w3.org/International/questions/qa-css-lang

Answer 2

If you don't mind the help of jQuery then the following code can solve your problem. 如果您不介意jQuery的帮助，那么以下代码可以解决您的问题。

html code- HTML代码 -

<div id="form" class="loading">
        <form action="">
            <div id="container">
                <input type="text" name="input" id="input" value="">
                <input type="submit" name="submit" value="submit" id="s">
            </div>
        </form>
    </div>

css and js- css和js-

    <script>
            jQuery(document).ready(function($){
                var containerWidth = $("#form #container").outerWidth();
                var searchBoxWidth = jQuery("#form #s").outerWidth();               
                var adjustedWidth = containerWidth -  searchBoxWidth - 30   //  this is a value i've chosen to separate the button from the input field and the right edge of the wrapper
                jQuery("#form #input").width(adjustedWidth);
jQuery("#form").removeClass('loading');
            });
        </script>

        <style>
.loading form{visibility:hidden;background:url(img/loader.gif) no-repeat 50% 50%}
/*url should follow your own link to the gif you want to use*/
            #form{width:700px;margin:200px auto;}
            #form #container{border-radius: 30px;height: 60px;background: #ccc;border: 0;padding:0}
            #form #input{height: 40px;margin: 10px 0 0 10px;border-radius: 30px;border: 0;padding:0;}
            #form #s{padding: 13px 28px;border: 0;border-radius: 30px;text-transform: uppercase;}
        </style>

edit: 编辑：

I've added a class "loading" in the main wrapper to identify the loading stage. 我在主包装器中添加了一个类“loading”来识别加载阶段。 Initial I don't want any visitor see the contents inside the wrapper so that i set the rule visibility:hidden so that the contents will remain in the position and they are not displayed instead i'm showing a loading gif using the background property of the loader class. 初始我不希望任何访问者看到包装器内的内容，以便我设置规则visibility:hidden以便内容将保留在该位置，而不显示它们我正在使用background属性显示加载gif loader类。
when the width of the input box is set then i'm removing the class loading from the wrapper so that the contents are now visible. 当设置输入框的宽度时，我将从包装器中删除类loading ，以便现在可以看到内容。

Answer 3

If you don't mind having tables for layout you can do it like this ( fiddle ): 如果您不介意使用表格进行布局，您可以这样做（小提琴）：

<style>
.search-table {
    width:100%;
}
.search-table .search{
    box-sizing:border-box;
    width:100%;
}
.search-table .btn-cell {
    width:1px;
    white-space:nowrap;
}
</style>
<div id="searchContainer">
    <table class="search-table">
        <tr>
            <td><input type="text" id="searchField" class="search" name="searchQ" /></td>
            <td class="btn-cell"><button>search</button></td>
        </tr>
    </table>
</div>

在容器内输入对齐

问题描述

3 个解决方案

解决方案1
1 2013-04-12 12:53:39

解决方案2
1 已采纳 2013-04-12 13:03:08

解决方案3
1 2013-04-12 13:19:33

在容器内输入对齐

问题描述

3 个解决方案

解决方案1 1 2013-04-12 12:53:39

解决方案2 1 已采纳 2013-04-12 13:03:08

解决方案3 1 2013-04-12 13:19:33

解决方案1
1 2013-04-12 12:53:39

解决方案2
1 已采纳 2013-04-12 13:03:08

解决方案3
1 2013-04-12 13:19:33