0

对于一个可能愚蠢的问题，抱歉，我一直在寻找各种方法来解决这个问题，但它仍然不能像我想要的那样工作。

这是输入字段保持非常短（如~150px）的问题之一，即使它的框更宽（如宽显示器上的~1300 px）。

我最初的 html 和 CSS 显示在：http: //jsfiddle.net/jjoensuu/qSz5x/5/

为了解决这个问题，我在以下位置找到了解决方案： 如何使文本输入框占据父块内的所有剩余宽度？

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

我还在同一线程中尝试了“Marty Wallace”的解决方案，但无法使其正常工作。

因此，作为对我在 jsfiddle 站点上的代码的参考，“topsearch”框的宽度约为 1300 像素，但“field-topsearch”输入字段保持在 156 像素左右。

在我尝试的一些解决方案中，“开始”按钮会转到下面的下一行。任何有关如何解决此问题的帮助将不胜感激。

4

2 回答 2

1

这是工作小提琴：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;
    }

​</p>

于 2012-07-30T06:59:34.300 回答
1

我采取了稍微不同的方法。在我看来，您希望输入文本字段扩展，但标签和输入按钮在输入字段的两侧保持相同大小。这对于生成包含多行的表单而不诉诸表格布局可能很有用。此外，先前的建议在将元素保持在一行方面并不能很好地发挥作用。这种技术将允许包含“盒子”的大小随意调整为您喜欢的任何内容。

我确实不得不稍微调整一下你的 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%;
}

小提琴在这里可用

于 2013-09-27T13:55:59.117 回答