我怎样才能使搜索栏向右浮动

Question

我正在做一个单独的项目，在其中，我想将搜索栏放到右边，但是由于某种原因，我似乎无法把它放到右边。这是我使用的CSS代码。

.searchbox {
  /*width: 210px;	
    	  border: 5px solid #f8c7f2;
    	  background-color: #66cc00;
    	  margin-bottom: 30px;*/
  float: right;
}

.right_section_content {
  width: 180px;
  padding: 15px;
}

.right_section_content form {
  padding: 0;
  margin: 0;
}

.right_section_content input {
  width: 180px;
  margin-bottom: 15px;
}

.right_section_content .button {
  width: 70px;
  margin-bottom: 0px;
}

<div class="Searchbox">
  <h4>Search</h4>
  <div class="right_section_content">
    <form method="get" action="#">
      <input name="keyword" type="text" id="keyword" />
      <input type="submit" name="submit" class="button" value="Search" />
    </form>
  </div>
</div>

Answer 1

您几乎拥有它。 HTML类名称为case sensitive。您需要更改Searchbox以匹配CSS选择器：.searchbox，反之亦然：

.searchbox {
  width: 210px;   
  border: 5px solid #f8c7f2;
  background-color: #66cc00;
  margin-bottom: 30px;
  float: right;
}

.right_section_content {
  width: 180px;
  padding: 15px;
}

.right_section_content form {
  padding: 0;
  margin: 0;
}

.right_section_content input {
  width: 180px;
  margin-bottom: 15px;
}

.right_section_content .button {
  width: 70px;
  margin-bottom: 0px;

<div class="searchbox">
  <h4>Search</h4>
  <div class="right_section_content">
    <form method="get" action="#">
      <input name="keyword" type="text" id="keyword" />
      <input type="submit" name="submit" class="button" value="Search" />
    </form>
  </div>
</div>

但是，如果您确实需要使用Searchbox，则可以使用不区分大小写的属性选择器，方法是在属性后附加一个i，但这可能会产生负面影响性能：

[class~="searchbox" i] {
  width: 210px;   
  border: 5px solid #f8c7f2;
  background-color: #66cc00;
  margin-bottom: 30px;
  float: right;
}

.right_section_content {
  width: 180px;
  padding: 15px;
}

.right_section_content form {
  padding: 0;
  margin: 0;
}

.right_section_content input {
  width: 180px;
  margin-bottom: 15px;
}

.right_section_content .button {
  width: 70px;
  margin-bottom: 0px;

<div class="Searchbox">
  <h4>Search</h4>
  <div class="right_section_content">
    <form method="get" action="#">
      <input name="keyword" type="text" id="keyword" />
      <input type="submit" name="submit" class="button" value="Search" />
    </form>
  </div>
</div>