如何獲取我的按鈕旁邊的文本框？

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; 
 
}

\t <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; 
}