div内的对齐问题
[英]alignment issue inside div
问题描述
在div中对齐元素时遇到问题。
我想要这样的东西
|-----------------------------------------------|
|<P> | <input type = text> | imagebutton here |
|here | here | |
|-----------------------------------------------|
但是我得到的东西像
|-----------------------------------------------|
|<P> | |
|here | |
| <input type = text> | |
| here | |
| imagebutton here |
|-----------------------------------------------|
因此，存在使div下一个元素显示在当前元素下方的问题，即，如果我可以将<input>与<p>水平对齐，我认为这将提供解决方案。
以下是我的尝试：
CSS部分
.imagewrapper{
display: table-cell;
background-color:yellow;
margin-left: 70%;
width: 25%;
margin-bottom: 10%;
height: 35%;
}
.textwrapper{
display: table-cell;
background-color:blue;
margin-left: 30%;
width: 40%;
margin-bottom: 10%;
height: 35%;
}
.msg_wrapper{
display: table-cell;
background-color:lime;
margin-left:5%;
width: 25%;
margin-bottom: 10%;
}
HTML边
<div id="searchClass">
<p class="msg_wrapper"><b>Class</b></p>
<input id="txt_class" style="background-color: Aqua; class = textwrapper >
<input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png">
</div>
3 个解决方案
解决方案1
5 已采纳 2013-06-22 11:07:25
试试这个html：
<div id="searchClass">
<p class="msg_wrapper"><b>Class</b></p>
<input style="background-color: Aqua; width:25%; float:left; margin:0 0 0 1%; class = textwrapper" id="txt_class">
<input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png">
</div>
或以下CS代码：
<style>
.imagewrapper {
display: table-cell;
background-color: yellow;
margin-left: 1%;
width: 25%;
margin-bottom: 10%;
height: 35%;
}
.textwrapper {
display: table-cell;
background-color: blue;
margin-left: 30%;
width: 40%;
margin-bottom: 10%;
height: 35%;
float: left;
}
.msg_wrapper {
display: table-cell;
background-color: lime;
margin-left: 5%;
width: 25%;
margin-bottom: 10%;
float: left;
}
</style>
解决方案2
1 2013-06-22 11:06:25
嘿，以这个例子为例。
<html>
<head>
<title></title>
<style type="text/css">
#tablecellexamples div { border:1px solid black; width:130px; background-color:#eee }
</style>
</head>
<body>
<div id="tablecellexamples">
<div style="display:table-row">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus dignissim ipsum a dignissim. Proin mattis orci sit amet quam feugiat lobortis.
</div>
<div style="display:table-cell; vertical-align:top">Top aligned</div>
<div style="display:table-cell; vertical-align:middle">Center aligned</div>
<div style="display:table-cell; vertical-align:bottom">Bottom aligned</div>
</div>
</div>
</body>
</html>
解决方案3
0 2013-06-22 11:12:45
您的HTML不正确（缺少右引号）已在以下行中更正：
<input id="txt_class" class="textwrapper">
您应该使用css规则添加水色，代替蓝色。
您可以使wrapper div表现为（包含）行：
#searchClass {
display: table-row;
}
然后，您将需要调整边距。
就个人而言，我将删除所有边距，高度等设置，并首先查看外观，而无需这些设置。
父div内子div的对齐问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.