这是我的请求的图像
我是 CSS 和 HTML 定位的新手。我花了三天时间尝试实现创建内联编辑器的这种倾向。我希望能够保持 3<div>或<span>任何符合这些条件的行为。
- 主体可以是任何容器。
- Pink Div 可以是任何东西，但必须包含其他 3 个内联空间支架
- 左侧绿色框用于可变文本长度，如标签
- 右绿框用于表示为按钮或图标的可变数量的操作。
- 中间的绿色框用于编辑器，例如容器内的输入文本或多个字段。
我做了什么，哈哈哈，探索了所有关于 CSS 定位的伪专家网站，尝试了各种框架，但从未找到一种方法来简单、清晰且易于维护，无需任何形式的 hack……这就是我所做的.
这是我的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<style>
div.EditorFrame {
background-color: lightcyan;
padding: 5px;
}
span.LabelPanel {
display: inline-block;
background-color: lightskyblue;
}
span.EditorPanel {
display: inline-block;
background-color: lightpink;
}
span.ButtonPanel {
display: inline-block;
text-align: right;
background-color: lightgreen;
}
</style>
<script type="text/javascript">
function body_onload() {
//var editor = document.getElementById("txtAddress");
//var editorcontainer = editor.parentElement;
//editor.width = editorcontainer.clientWidth;
}
</script>
</head>
<body onload="body_onload()">
<div class="EditorFrame">
<span class="LabelPanel">
<label for="AddressEditor" id="lblAddressEditor">Enter an address</label>
</span>
<span class="EditorPanel">
<input id="AddressEditor" type="text" /></td>
</span>
<span class="ButtonPanel">
<button type="submit">Add</button>
<!--button>Cancel</!--button>-->
</span>
</div>
</body>
</html>