输入框和搜索按钮贴着样式
时间: 2023-11-25 08:07:10 浏览: 105
您可以尝试使用CSS的`display:flex`属性来实现输入框和搜索按钮贴着的样式。具体的CSS代码如下:
```css
.container {
display: flex;
align-items: center;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
flex: 1;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
```
然后将它们放在同一个div中,如下所示:
```html
<div class="container">
<input type="text" placeholder="请输入搜索内容">
<input type="submit" value="搜索">
</div>
```
这样,您就可以将它们放在一起,并且它们之间会紧密排列。其中`flex: 1`属性将会使输入框占据剩余的空间,从而与搜索按钮贴在一起。
相关问题
输入框和搜索按钮贴着,样式
您可以使用CSS中的margin属性来控制输入框和搜索按钮之间的距离。例如,您可以将输入框和搜索按钮的样式设置如下:
```css
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
margin-right: 10px; /* 控制输入框右侧的间距 */
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
```
然后将它们放在同一个div中,如下所示:
```html
<div>
<input type="text" placeholder="请输入搜索内容">
<input type="submit" value="搜索">
</div>
```
这样,您就可以将它们放在一起并控制它们之间的距离。
html css开关按钮样式
下面是一个基本的 HTML/CSS 开关按钮样式,你可以根据自己的需求进行修改。
HTML 代码:
```
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
```
CSS 代码:
```
/* 开关按钮容器样式 */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 开关按钮输入框样式 */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 开关按钮圆形样式 */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
/* 开关按钮圆形滑块样式 */
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
/* 开关按钮选中状态样式 */
input:checked + .slider {
background-color: #2196F3;
}
/* 开关按钮选中状态圆形滑块样式 */
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
```
可以将上面的代码复制粘贴到你的 HTML 和 CSS 文件中,并根据需要进行修改和优化。