html - 將元素定位到右側

Question

我試圖用css3制作這樣的東西，但我不知道如何將搜索按鈕定位在'結果'div的右側。 不是在標簽之后

        <div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
            <div class="result" style="display:inline;">
                <div style="height:100px; width:150px;">
                    Name:
                    <label>Mojtaba Iranpanah</label><br>
                    Email:
                    <label>00000000</label><br>
                    Phone Numner:
                    <label>00000000</label>
                </div>
                <div class="btn" style="float:right;">
                    <button>Search!</button>
                </div>
            </div>
        </div>

Answer 1

用這個 ：

<div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
    <div class="result" style="display:inline;">
        <div style="height:100px; width:150px; display:inline-block; float:left;">
            Name:
            <label>Mojtaba Iranpanah</label><br>
            Email:
            <label>00000000</label><br>
            Phone Numner:
            <label>00000000</label>
        </div>
        <div class="btn" style="float:right;display:inline-block;">
            <button>Search!</button>
        </div>
    </div>
</div>

演示： http ： //jsfiddle.net/DZPEy/

Answer 2

這應該可以解決您的問題：

<div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
    <div class="result" style=""> <!-- display:inline here has no effect -->
        <!-- Here is the place to put the display -->
        <div style="display:inline-block; height:100px; width:150px;">Name:
            <label>Mojtaba Iranpanah</label>
            <br>Email:
            <label>00000000</label>
            <br>Phone Numner:
            <label>00000000</label>
        </div>
        <!-- Here is the place to put the display -->
        <div class="btn" style="display:inline-block; vertical-align: middle; height: 100px;">
            <button>Search!</button>
        </div>
    </div>
</div>

演示： http ： //jsfiddle.net/t92c2/2/

Answer 3

嘗試如下：

<div id="ResultBox" style="margin-right:10px;margin-top:5px; height:90%;">
            <div class="result" style="display:inline;">
                <div style="height:100px; width:150px; float:left">
                    Name:
                    <label>Mojtaba Iranpanah</label><br>
                    Email:
                    <label>00000000</label><br>
                    Phone Numner:
                    <label>00000000</label>
                </div>
                <div class="btn" style="float:left; margin-left:10px">
                    <button>Search!</button>
                </div>
            </div>
        </div>