HTML中的Wordpress简码问题嵌入表格

Question

I created a custom html form for my website. If I put all the code in a Wordpress page, everything works fine. The problem is, when I try to embed it with a short code. The final result is different, because the label and select items are rendered in-line. In attach the screen shots. Can someone help me? The embed come is below:

add_shortcode("searching_form", "searching_form_render");

function searching_form_render() {  
    return'<form class="searching_form" name="input" action="demo_form_action.asp" method="get">
        <div class="field">
          <label>Search Practitioners & Therapists</label> 
          <select name="Select a Therapy">
            <option value="0" classname="invalid">Select a Therapy...</option>
            <option value="1">Deep Tissue Massage</option>
            <option value="2">Remedial Massage</option>
            <option value="3">Relaxation & Pregnancy Massage</option>
            <option value="4">Reflexology</option>
            <option value="5">Lymphatic Drainage Massage</option>
            <option value="6">Shiatsu</option>
          </select>
          <span>e.g. yoga, naturopath</span>
        </div>

        <div class="field">
          <label>Where?</label>
          <select name="Select Location">
            <option value="0">ALL</option>
            <option value="1">NSW</option>
            <option value="2">QLD</option>
            <option value="3">SA</option>
            <option value="4">TAS</option>
            <option value="5">VIC</option>
            <option value="6">WA</option>  
          </select>
          <span>e.g. NSW</span>
        </div>

        <div class="field">
          <input class="search_button" type="submit" value="Search">
        </div>

        <div class="clear"></div>

      </form>';
}   

This is the CSS code:

.searching_form {
    padding: 22px;
    webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 44px;
    background-color: #004062;
}

.searching_form label {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-left: 4px;
}

.searching_form span {
    color: cyan;
    margin-left: 4px;
}

.searching_form select {
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    height: 40px;
    webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    background-color: #fafafa;
    margin-top: 5px;
    margin-bottom: 5px;
}

.searching_form .field {
    float: left;
    margin-right: 12px;
}

.searching_form .search_button {
    border: 1px solid #006;
    background-color: #FAA21B;
    display: block;
    padding: 11px 20px;
    font-weight: bold;
    margin-left: 6px;
    webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.searching_form .search_button:hover {
    background-color: #faae3a;
}

.clear { 
    clear:both; 
    height:0px; 
    width:0px; 
    display:table; 
    content:"";
}

Answer 1

Add display: block; property to .searching_form label and also to .searching_form select