Кнопка поиска внутри поля поиска

Question

Кнопка поиска внутри поля поиска

0

Я хочу внедрить кнопку поиска внутри окна поиска, и я нахожу ее полезной: кнопка поиска внутри окна поиска, такого как Bing

но когда я размещал код на своем сайте, он не показывал ожидаемого пути, что не так?

это код

HTML

<input type="text" id="q" />
<input type="button" id="b" value="Search" />

CSS

#q, #b { 
   margin: 0 
}
#q { 
   padding 5px; 
   font-size: 2em; 
   line-height: 30px 
}
#b { 
   /* image replacement */
   text-indent: -99999px; 
   width: 30px; 
   height: 30px; 
   display: block;
   background: gray url(button.png) 0 0 no-repeat;
}

код

user2793559 24 сен. 2013, в 08:02

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Eugine Joseph · Answer 1 · 2013-09-24T04-12-00.000Z

Попробуй это

#q, #b { 
   margin: 0 
   display:inline-block;
   float:left;
}
#q { 
   padding 5px; 
   font-size: 2em; 
   line-height: 30px; 
   border:none;
}
#b { 
   /* image replacement */
    margin-top:8px;
   width: 30px; 
   height: 30px; 
   background: gray url(button.png) 0 0 no-repeat;
}
.border {
   border:#ccc solid 1px; 
   width:390px;
}
.clear {
   clear:both;
}

<div class="border">
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
    <div class="clear"></div>
</div>

Проверь это

Mohsen Safari · Answer 2 · 2013-09-24T02-58-00.000Z

посмотрите на это: demo

HTML:

<div>
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
</div>

CSS:

#q, #b { 
   margin: 0 
}
#q { 
   padding 5px; 
   font-size: 2em; 
   padding-left:50px;
   line-height: 30px 
}
#b { 
   /* image replacement */
   text-indent: -99999px; 
   width: 30px; 
   height: 30px; 
   display: block;
    position:absolute;
    top:4px;
    left:4px;
   background: gray url(button.png) 0 0 no-repeat;

   /* placing next to input using float or absolute positioning omitted ... */
}
div{
    position:relative;
}