我试图在同一行中排列两个对象,即文本框和一个搜索框,但由于某种原因它没有排列。尝试了几个教程,但仍然没有成功。据我所知,我错过了一些东西。任何帮助表示赞赏。这是代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.transbox {
background-color: grey;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
padding: 5%;
}
div.transbox pt {
border: 1px solid #505050; /*#123360;*/
position: relative;
left: 0;
font-size: 12px;
width: 27%;
background-color: white;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:10px;
font-weight: bold;
color: black;
padding: 5px;
}
div.transbox ps {
position: absolute;
right: 0;
border: 1px solid #505050; /*#123360;*/
font-size: 12px;
width: 27%;
background-color: white;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:10px;
font-weight: bold;
color: black;
padding: 5px;
}
</style>
</head>
<body>
<div class="transbox">
<pt> example.com</pt>
<ps><form>
<input type="text" name="search" />
</form> </ps>
</div>
</body>
</html>