Question

我左侧有一个textarea，应该使用大约80％的屏幕，右侧的textarea旁边有一个按钮。

当浏览器窗口变小时，textarea应该变小，按钮应该保留在textarea旁边的右侧。

当窗口太小时，我的代码不能停止工作。

文字溢出也不起作用。

有什么想法吗？

THX！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
        html, body { margin: 0; padding: 0; }
        body, #content { width: 100%; }
        textarea { width: 80%; }
        button {
            text-overflow: ellipsis;
            display: block;
            overflow: hidden;
            white-space: nowrap;
        }
        </style>
    </head>

    <body>
        <div id="content">
            <textarea rows="10">x</textarea>
            <input value="Submit Something" class="button" id="submitSomething" name="submitSomething" type="submit">
        </div>
    </body>
</html>

Answer 1

试试这个：

button {
        text-overflow: ellipsis;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        float: right;
        right: 0;
        position: fixed;
    }

Answer 2

您可以使用calc来计算剩余宽度并将其分配给您的textarea。

您可以按像素为单位修复按钮宽度，例如width: 120px;和指定width: calc(100% - 120px);到textarea。

<强> 实施例 ：

＆＃13;

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { }
body, #content { width: 100%; }
textarea { width: calc(100% - 140px); }
.button {
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 120px;
}

＆＃13;

<div id="content">
    <textarea rows="10">x</textarea>
    <input value="Submit Something" class="button" id="submitSomething" name="submitSomething" type="submit">
</div>

＆＃13;

小提琴：http://jsfiddle.net/abhitalks/0ospfv4r/

如果您在上面的示例中注意到，140px是任意使用的，而不是120px。这是因为，您的元素设置为display: inline-block，并且此类元素会考虑空白区域。所以使用的宽度比那个大一点。

你可以通过......摆脱白色空间。

这个（合并textarea和按钮一起）：

<textarea rows="10">x</textarea><input value="Submit Something" class="button" id="submitSomething" name="submitSomething" type="submit">

或者这个（在开始按钮之前关闭你的textarea ）：

<textarea rows="10">x</textarea
><input value="Submit Something" class="button" id="submitSomething" name="submitSomething" type="submit">

然后，您可以在textarea上安全地使用width: calc(100% - 120px)。

具有动态宽度的Textarea，位于提交按钮旁边

2 个答案: