Question

我正在为我的网站制作搜索栏。我有一个输入标签，当你在里面键入时，结果会以小块形式出现。结果很好，但出于某种原因，我无法解决为什么输入栏的样式不起作用。我无法调整条形的大小或位置。或任何事，基本上。以下是相关代码：

＆＃13;

.searchbar{
    border: 1px solid black;
    width: 100%;
    height: 24px;
    display: block;
    margin: 0px;
    padding: 5px;
    left: 50%;
}
#search_cont{
    left: 37.5%;
    position: absolute;
}
#whatIWant{
    position: absolute;
    top: 10%;
    left: 37.5%;
    height: 24px;
    width: 15%;
    border: 1px solid black;
}

＆＃13;

<div id='search_cont'><input type='text' ng-model='searchbar' class='.searchbar' placeholder='Search'></div>
<div id='whatIWant'>What I want</div>

＆＃13;

以下是小提琴中的全部内容：https://jsfiddle.net/Tobsta/ykmp7bed/

Answer 1

- 类的名称应该没有。（点） - 你的搜索栏在这个部门内。像这样在这个部门申请宽度。然后你可以在搜索栏上应用宽度并设置样式。

＆＃13;

#search_cont{
    position: absolute;
    width:100%;
}

＆＃13;

希望你有这个问题。您现在可以通过为.searchbar提供边距，高度和宽度来设置搜索栏的样式。

Answer 2

类名由无点指定。

class='.searchbar'不是class='searchbar'。

请参阅：https://jsfiddle.net/tamilcselvan/obz4tc65/

.searchbar {
  border: 1px solid black;
  width: 100%;
  height: 24px;
  display: block;
  margin: 0px;
  padding: 5px;
  left: 50%;
}
#search_cont {
  left: 37.5%;
  position: absolute;
}
#whatIWant {
  position: absolute;
  top: 10%;
  left: 37.5%;
  height: 24px;
  width: 15%;
  border: 1px solid black;
}

<div id='search_cont'>
  <input type='text' ng-model='searchbar' class='searchbar' placeholder='Search'>
</div>
<div id='whatIWant'>What I want</div>

Answer 3

您刚刚在班级字段中输入了一个点。

你应该使用class ='searchbar'

<input type='text' ng-model='searchbar' class='searchbar' placeholder='Search'>

样式化HTML <input />标记

3 个答案: