Question

对不起加尔斯＆amp;一个潜在的愚蠢问题的家伙，但我一直在寻找解决这个问题的各种方法，它仍然没有像我想要的那样工作。

这是输入字段保持非常短（例如~150px）的这些问题之一，即使它的盒子更宽（例如在宽显示器上约为1300像素）。

我最初有html＆amp; CSS显示在： http://jsfiddle.net/jjoensuu/qSz5x/5/

为了解决这个问题，我找到了解决方案： How to make text input box to occupy all the remaining width within parent block?

我在上面的帖子中创建了我认为类似于“wdm”的答案，但我遗漏了一些东西，因为结果仍然是一个狭窄的输入字段。我的创作在这里： http://jsfiddle.net/jjoensuu/rJ45P/8/

我也在同一个帖子中尝试过“Marty Wallace”的解决方案，但无法让它工作。

因此，作为jsfiddle网站上我的代码的引用，“topsearch”框的宽度为~1300像素，但“field-topsearch”输入字段保持在156px左右。

对于我尝试的一些解决方案，“Go”按钮将换行到下面的下一行。任何有关如何解决这个问题的帮助将不胜感激。

Answer 1

这是工作的fiddel：http://jsfiddle.net/surendraVsingh/rJ45P/18/

<强> CSS

.topsearch
    {
    height: 40px;
    line-height: 35px;
    padding-right: 10px;
    width:100%;
    display:table;
    }

.topsearch label
    {
    color: #c98116;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0 5px;
    }

.topsearch label, .topsearch form
    {
    display: inline;
    } 

.topsearchfield
    {
    border: none;
    height: 24px;
    font-size: 15px;
    width: auto;
    } 
#field-topsearch{width:80%; display:inline-block;}
.button-start-search submit
    {
    display: table-cell;
    }

Answer 2

我采取了略微不同的方法。在我看来，您希望输入文本字段扩展，但标签和输入按钮在输入字段的任一侧保持相同的大小。这可能对生成包含多行的表单非常有用，而无需借助表格布局。此外，之前的建议在将元素保持在一行上并没有真正起作用。这种技术可以将包含的“盒子”调整为你想要的任何颜色。

我确实需要稍微调整你的html，但我觉得标签应该是它与之相关的元素的旁边。为了清晰起见，我还省略了html格式，因为这不是布局的一部分：

<div class="input">
    <label for="field-topsearch">Search</label>
    <div class="value">
        <div>
            <input id="field-topsearch" maxlength="256" type="text" name="search_str" value=""/>
        </div>
        <input type="submit" class="button-start-search submit " value="Go!"/>
    </div>
</div>

和css：

.value {
    position: relative;
}
.value>div {
    margin-left: 60px;
    margin-right: 40px;
}
label {
    position: absolute;
    top: 0px;
    left: 0px;
}
input.submit {
    position: absolute;
    top: 0px;
    right: 0px;
}
input[type="text"] {
    width: 100%;
}

小提琴可用here

如何将输入字段扩展为父级的100％

2 个答案: