1

我有这样一个问题：容器中有两个输入：文本字段和提交按钮。问题在于，当区域设置更改文本时（例如从英语到法语），按钮会分层并与文本字段重叠。以下是示例：

英语： 英语

法语： 法语

有什么办法，所以搜索字段的长度会自动适合容器吗？

这个容器的代码是这样的：

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

3 回答 3

1

我在自己设计多语言表单时遇到了类似的问题，虽然我从未找到最佳解决方案，但我会分享我最终所做的事情以防万一。

不幸的是，动态表单的样式很少容易，有时甚至是不可能的。但是，您可以根据页面语言设置输入字段的样式。首先确保页面 html 反映了您使用的语言（我使用服务器端代码根据语言生成它，在您的情况下，它应该是一个直接的 php echo 语句）：

<body lang="en">

接下来，根据语言选择文本输入

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

根据语言的不同，还有多种其他选择方式，请查看http://www.w3.org/International/questions/qa-css-lang

于 2013-04-12T12:53:39.560 回答
1

如果您不介意 jQuery 的帮助，那么下面的代码可以解决您的问题。

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

编辑：

  1. 我在主包装器中添加了一个“加载”类来标识加载阶段。最初，我不希望任何访问者看到包装器内的内容，因此我设置了规则visibility:hidden，以便内容将保留在该位置并且不显示它们，而是使用类的background属性显示加载 gif loader。
  2. 当设置输入框的宽度时，我loading将从包装器中删除该类，以便内容现在可见。
于 2013-04-12T13:03:08.217 回答
1

如果您不介意使用表格进行布局，您可以这样做（小提琴）：

<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>
于 2013-04-12T13:19:33.747 回答