在容器內輸入對齊

Question

我有這樣一個問題：容器中有兩個輸入：文本字段和提交按鈕。 問題是當文本被區域設置更改時（例如從英語到法語），該按鈕會被刻錄並重疊文本字段。 以下是示例：

英語：

法國：

有什么辦法，所以搜索字段的長度會自動適合容器嗎？

這個容器的代碼是這樣的：

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

Answer 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

Answer 2

如果您不介意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>

編輯：

我在主包裝器中添加了一個類“loading”來識別加載階段。 初始我不希望任何訪問者看到包裝器內的內容，以便我設置規則visibility:hidden以便內容將保留在該位置，而不顯示它們我正在使用background屬性顯示加載gif loader類。
當設置輸入框的寬度時，我將從包裝器中刪除類loading ，以便現在可以看到內容。

Answer 3

如果您不介意使用表格進行布局，您可以這樣做（小提琴）：

<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