如何获取按钮旁边的文本字段？

Question

我在wordpress中使用插件来显示简报形式，我尝试使用css设置样式。在简报注册之上我得到了一个搜索表单，我试着找到相同的风格。

这是html输出和我的css：

#sidebar {
  font-size: 1em;
  font-family: sans-serif, Arial;
  color: #2A2A2A;
}
.screen-reader-text {
  display: none;
}
#s {
  width: 67%;
  height: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.247059);
  outline: 0 none;
}
#searchsubmit {
  width: 25%;
  height: 26px;
  margin-left: 3px;
  background: #fff;
  border: 1px solid #000;
  transition: all 0.2s ease 0s;
  font-size: 0.8em;
  font-family: sans-serif, Arial;
  float: right;
  padding: 0;
}
#searchsubmit:hover {
  background: #63B75D;
  color: #fff;
  border: 1px solid #63B75D;
}
#s:focus {
  border: 1px solid #63B75D;
}
#haet-cleverreach-cleverreach_email {
  width: 67%;
  height: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.247059);
  outline: 0 none;
}
#haet-cleverreach-cleverreach_email:focus {
  border: 1px solid #63B75D;
}
#haet-cleverreach-submit {
  width: 25%;
  height: 26px;
  margin-left: 3px;
  background: #fff;
  border: 1px solid #000;
  transition: all 0.2s ease 0s;
  font-size: 0.8em;
  font-family: sans-serif, Arial;
  float: right;
  padding: 0;
}
#haet-cleverreach-submit:hover {
  background: #63B75D;
  color: #fff;
  border: 1px solid #63B75D;
}

	<h3><a href="#">Suche</a></h3>
<form role="search" method="get" id="searchform" class="searchform" action="http://backpackfamily.de/">
  <div>
    <label class="screen-reader-text" for="s">Suche nach:</label>
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Suchen" />
  </div>
</form>
<h3><a href="#">Newsletter</a></h3> 
<div class="haet-cleverreach">
  <form method="post" class="haet-cleverreach-form">
    <input type="hidden" name="haet-cleverreach-is-widget" value="1">
    <input type="hidden" name="haet-cleverreach-form-id" value="122548">
    <input type="hidden" name="haet-cleverreach-list-id" value="891928">
    <div class="haet-cleverreach-field-wrap label-inside type-description ">
      <p>Melde dich zu unserem Newsletter an!</p>
    </div>
    <div class="haet-cleverreach-field-wrap label-inside type-email ">

      <input type="email" id="haet-cleverreach-cleverreach_email" name="haet-cleverreach-cleverreach_email" value="" placeholder="E-Mail">

    </div>
    <div class="haet-cleverreach-field-wrap label-inside type-submit ">
      <button type="submit" class="button" id="haet-cleverreach-submit">
        →</button>
    </div>
  </form>
</div>

我不知道该怎么做，尝试过各种各样的事情，但没有什么对我有用！

谢谢！

Answer 1

将这些样式添加到您的样式中它会正常工作：

.haet-cleverreach-field-wrap.label-inside.type-email {
    width: 67%;
    float: left;
}
#haet-cleverreach-cleverreach_email{
    width:100% !important;
}

Answer 2

您可以添加以下CSS：

#haet-cleverreach-cleverreach_email {
    float: left;
}