搜索栏的元素float关系

最新推荐文章于 2022-08-09 20:30:09 发布

Fade Away

最新推荐文章于 2022-08-09 20:30:09 发布

阅读量123

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_26239917/article/details/88908611

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

布局：outer父容器

search icon right

可以是用margin - 调整位置

但是inb却不能调整，有可能是父元素宽度原因，课程上的宽度比较大，自己设置的是正好的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		input{
			outline: none;
			/*表单不会继承文本属性*/
			/*inherit继承的意思*/
			color: inherit;
			font-size: inherit;
			font-family: inherit;
		}
		/*input:focus{
			outline: none;
		}*/
		.search{
			width: 450px;
			height: 40px;
			border:1px solid #f00;
			margin: 50px auto;
			background-color: #ff0;
		}
		.s1{
			width: 300px;
			height: 40px;
			border: 0;
			/*border: none;*/
			background-color: transparent;
			/*background-color: none; 此处语法错误*/
			/*background: none;*/
			float: left;//飘出文档流
			padding: 0 10px;
		}
		.s2{
			width: 100px;
			height: 42px;
			border: 0;
			background: blue;
			float: right;//飘出文档流
			margin-top: -1px;
			margin-right: -1px;
			color: #fff;
		}
		.search span{
			width: 30px;
			height: 40px;
			float: left;//飘出文档流
			background: url(../images/qqq_06.jpg) center center no-repeat;
		}
	</style>
</head>
<body>
	<div class="search">
		<form action="">
			<input type="text" class="s1">
			<span></span>
			<input type="submit" value="百度一下" class="s2">
		</form>
	</div>
</body>
</html>

Fade Away

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索栏的元素float关系

布局：outer父容器search icon right可以是用margin - 调整位置但是inb却不能调整，有可能是父元素宽度原因，课程上的宽度比较大，自己设置的是正好的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Doc...
复制链接

扫一扫