图片
我使用以下 CSS 和 HTML 进行了尝试。当浏览器全宽时看起来很好,而在调整浏览器大小时它看起来很乱。我希望元素在那里,并且在调整浏览器大小时必须出现水平滚动。对网络编程来说很新。Text-align:center 用于定位中心列不起作用,因为每次在左侧或右侧添加新文本时,它都会重新定位,并且 ROW1(文本)和 ROW2(按钮)中的中心列元素也不会出现同一行。也就是说,文本显示得有点右,按钮显示得有点左。文本对齐在这里不起作用。
CSS:
@charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML 代码:
<div class="wrapper">
<span class="topelements float_left" >Mail us: <a href="#">admin@admin.com</a></span>
<span class="topelements float_right">Left links <a href="#">My xyz</a></span>
<span class="topelements center_container">Welcome to xyz ! <a href="#">Sign in</a> or <a href="#">Signup</a>.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">