css - 如何使 HTML 输入在 2 个元素之间占用 100% 的空间?

标签 css html

给定以下 HTML,我如何使标签、输入和 2 个按钮存在于同一“行”中,并让输入在标签和 2 个按钮之间占据 100% 的空间,同时更改浏览器宽度?换句话说,我希望输入锚定在两侧,这样当您使浏览器的宽度变小或变大时,它的宽度就会改变。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>

    <style>
        /* ?? */
    </style>


</head>
<body>
    <div id="container">
        <form class="form">
            <p>
                <label>xyz:</label>
                <span class="item">
                    <input type="text" class="txt" name="description" id="description" />
                    <button>A</button>
                    <button>B</button>
                </span>
            </p>
            <br clear="all" />
        </form>
    </div>

</body>
</html>

在这里查看 JSFiddle:http://jsfiddle.net/3vGtJ/

最佳答案

您也可以尝试使用 display:tabledisplay:table-cell

http://jsfiddle.net/3vGtJ/1/

关于css - 如何使 HTML 输入在 2 个元素之间占用 100% 的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16322833/

相关文章:

javascript/jquery 根据输入到文本输入字段中的值更改 html 元素

mysql - CakePHP 将值作为 HTML 编码值保存到 MySQL 数据库

html - CSS 表格中出现奇怪的空白区域

javascript - 与 jQuery 集成的 Wordpress 循环

html - CSS 的居中问题

javascript - "li"行内元素的高度

html - 上传输入框

python - 在 django 项目中显示来自 views.py 的表格

html - Bootstrap 3 : Adjust size of cells in div row

javascript - 将样式属性迁移到单独的 .css 文件