- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想为我的网站设计一个响应式搜索框,所以当我找到这个 codepen fiddle - http://codepen.io/nikhil/pen/GuAho ,我摆弄它并最终得到了这个版本 - http://codepen.io/anon/pen/Qygrpe
<!-- language: lang-css -->
/* CSS Search */
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/*-------------------------------------*/
.content-wrapper {
width: 180px;
padding: 0px;
position:relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#search {
position:relative;
font-size:13px;font-family:"Dosis";
float:right;
margin-top:7px;
right:5px;
}
#search-form {
background-color:#314d5b;
height:32px;
line-height:32px;
border:0 none;
font-family:"Dosis";
font-size:13px;
font-weight:200;
color:#b5c5ca;
width:130px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
box-shadow:inset 0 0 1px 0 rgba(0,0,0,0.2);
padding:0 10px;
transition:all 0.5s ease 0s;
}
#search-form .search-button,#search-form .search-button:hover{
transition:all 0.5s ease 0s;
height:21px;
width:21px;
line-height:30px;
background-color:#ed0b77;
border:0 none;
float:right;
cursor:pointer;
outline:none;
}
#search-form:hover{
background-color:#f0f0f0;
}
#search-form:focus{
background-color:#eee;
text-shadow:none !important;
outline:none;
color:#459bb6;
}
#box {display:none}
.search-text {
font-size:13px;
font-family:"Dosis";
float:right;
cursor:pointer;
}
.search-text:hover {
color:#459bb6
}
.content-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 32px;
width: 30px;
background: #416577;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.content-wrapper button:hover{
background: #e2614c;
}
.content-wrapper button:active,
.content-wrapper button:focus{
background: #c42f2f;
}
.content-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #416577 transparent;
top: 8px;
left: -5px;
}
.content-wrapper button:hover:before{
border-right-color: #e2614c;
}
.content-wrapper button:focus:before{
border-right-color: #c42f2f;
}
.content-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
<!-- language: lang-html -->
<div id='search'>
<div class='content-wrapper cf'>
<form action='/search' id='searchform' method='get'>
<input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Looking for something?'/>
<button class='search-button' title='Search' type='submit'><img alt='search button' src='http://4.bp.blogspot.com/-e8Tp2vSgy2c/VpS0vc8zi7I/AAAAAAAAAN0/6rDw0GIVaSg/s1600/mysearch2.png' title='Search'/>
</button>
</form>
</div>
</div>
我将搜索框的 HTML 代码及其 CSS 添加到我的博客模板中,在屏幕宽度超过 600 像素之前它都能很好地显示。看看
但是一旦宽度变为 600 像素或更小,我的搜索框就会分崩离析并且不会 float 在右侧,即使有足够的空间也是如此。我什至删除了菜单的几个部分,只留下“BLOGGER”和“MUSIC”,但搜索框仍然脱离了 div。
请指出我哪里出错了,我确定我在 CSS 的某个地方走错了方向。提前致谢。
最佳答案
尝试添加这个解决方案:
.content-wrapper {
width: auto;
}
#search {
position: absolute; // it was relative
}
div#menutop {
position: relative;
}
关于html - CSS3 搜索框响应,搜索按钮分解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34741592/
我正在尝试在 R 中计算任意 N x J 矩阵 S 的投影矩阵 P: P = S (S'S) ^ -1 S' 我一直在尝试使用以下函数来执行此操作: P 概述 solve 基于一般方阵的 LU 分解
所以我有一个包含数千行的非常旧的文件(我猜是手工生成的),我正试图将它们移动到一个 rdb 中,但是这些行没有转换为列的格式/模式。例如,文件中的行如下所示: blah blahsdfas
这实际上只是一个“最佳实践”问题...... 我发现在开发应用程序时,我经常会得到很多 View 。 将这些 View 分解为几个 View 文件是常见的做法吗?换句话说......而不只是有view
使用以下函数foo()作为简单示例,如果可能的话,我想将...中给出的值分配给两个不同的函数。 foo args(mapply) function (FUN, ..., MoreArgs = NUL
正面案例:可以进入列表 groovy> println GroovySystem.version groovy> final data1 = [[99,2] , [100,4]] groovy> d
省略素数计算方法和因式分解方法的详细信息。 为什么要进行因式分解? 它的应用是什么? 最佳答案 哇,这个线程里有这么多争斗。 具有讽刺意味的是,这个问题有一个主要的有效答案。 因式分解实际上在加密/解
术语“分解不良”和“重构”程序是什么意思?你能举一个简单的例子来理解基本的区别吗? 最佳答案 重构是一种通用技术,可以指代许多任务。它通常意味着清理代码、去除冗余、提高代码质量和可读性。 分解不良代码
我以前有,here ,表明 C++ 函数不容易在汇编中表示。现在我有兴趣以一种或另一种方式阅读它们,因为 Callgrind 是 Valgrind 的一部分,在组装时显示它们已损坏。 所以我想要么破坏
最初,我一直在打开并同时阅读两个文件,内容如下: with open(file1, 'r') as R1: with open(file2, 'r') as R2: ### m
我正在尝试摆脱 标签和标签内的内容使用 beatifulsoup。我去看了文档,似乎是一个非常简单的调用函数。有关该功能的更多信息是 here .这是我到目前为止解析的 html 页面的内容...
给定一个 float ,我想将它分成几个部分的总和,每个部分都有给定的位数。例如,给定 3.1415926535 并要求将其分成以 10 为基数的部分,每部分 4 位数字,它将返回 3.141 + 5
我的 JSF 项目被部署为一个 EAR 文件。它还包括一些 war 文件。我需要 EAR 的分解版本(包括分解的内部 WAR)。 有什么工具可以做到吗? 最佳答案 以编程方式还是手动? EAR 和 W
以下函数不使用行透视进行 LU 分解。 R 中是否有一个现有的函数可以使用行数据进行 LU 分解? > require(Matrix) > expand(lu(matrix(rnorm(16),4,4
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 提供事实和引用来回答它. 7年前关闭。 Improve this
我正在使用登记数据进行病假研究。从登记册上,我只得到了每个人的病假开始日期和结束日期。但日期并没有逐年分割。例如,对于人 A,只有开始日期 (1-may-2016) 和结束日期 (14-feb-201
我发现以下 R 代码使用 qr 因式分解无法恢复原始矩阵。我不明白为什么。 a <- matrix(runif(180),ncol=6) a[,c(2,4)] <- 0 b <- qr(a) d <-
我正在尝试检测气候数据时间序列中的异常值,其中一些缺失的观测值。在网上搜索我发现了许多可用的方法。其中,STL 分解似乎很有吸引力,因为它去除了趋势和季节性成分并研究了其余部分。阅读 STL: A S
我想使用 javascript 分解数组中的 VIN,可能使用正则表达式,然后使用某种循环... 以下是读取 VIN 的方法: http://forum.cardekho.com/topic/600-
我正在研究 Databricks 示例。数据框的架构如下所示: > parquetDF.printSchema root |-- department: struct (nullable = true
我正在尝试简化我的代码并将其分解为多个文件。例如,我设法做到了: socket.once("disconnect", disconnectSocket); 然后有一个名为 disconnectSock
我是一名优秀的程序员,十分优秀!