[英]Why won't these child divs align to the right-side of their parent?
我正在尝试通过以下设计实现简单的用户界面:
但是正在得到以下结果(我在每个<div>
的边框周围添加了实线,以便可以看到div边框;在正确放置所有内容后,它们将被删除):
这是代码:
<html>
<head>
<title>Options</title>
<style>
#control-panel-div {
right: 0px;
}
</style>
</head>
<body>
<div id="content">
<div id="option-sel-div" style="border: 1px solid red;">
<select id="provider-sel">
<option selected="selected" id="default">Select an option</option>
<option id="1">option1</option>
<option id="2">option2</option>
</select>
</div>
<div id="config-manage-div" style="border: 1px solid red;">
<div id="control-panel-div" style="border: 1px solid red;">
<input id="add-config-btn" type="button" value="Add"/>
<input id="remove-config-btn" type="button" value="Remove"/>
</div>
<div id="table-div" style="border: 1px solid red;">
<div id="config-datatable">
<table>
<tr>
<td>
Blah
</td>
<td>
bleh
</td>
</tr>
<tr>
<td>
Fizz
</td>
<td>
Buzz
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
我相信 ,通过将control-panel-div
的right
属性设置为0px,则其所有子级都应右对齐,但是对于我来说,我无法使其正常工作(我也尝试过text-align
和box-align
)。 提前致谢。
尝试
#control-panel-div {
float: right;
}
如果您需要阅读该属性,请参阅以下文档: http : //www.w3schools.com/css/css_float.asp
没有太多麻烦,并且标记更加清晰:
<style type="text/css">
form {
width: 300px;
}
fieldset {
float: right;
border: 0;
}
table {
clear: both;
}
</style>
<form action="index.php">
<select name="the_select">
<option selected="selected" id="default">Select an option</option>
<option id="1">option1</option>
<option id="2">option2</option>
</select>
<fieldset>
<legend>Controls</legend>
<button>Add</button>
<button>Remove</button>
</fieldset>
<table>
<tr>
<td>
Blah
</td>
<td>
bleh
</td>
</tr>
<tr>
<td>
Fizz
</td>
<td>
Buzz
</td>
</tr>
</table>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.