[英]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>
試試這個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>
嘿,以這個例子為例。
<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>
您的HTML不正確(缺少右引號)已在以下行中更正:
<input id="txt_class" class="textwrapper">
您應該使用css規則添加水色,代替藍色。
您可以使wrapper div表現為(包含)行:
#searchClass {
display: table-row;
}
然后,您將需要調整邊距。
就個人而言,我將刪除所有邊距,高度等設置,並首先查看外觀,而無需這些設置。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.