Question

如何让prev和next按钮与表单选择元素位于同一行？我尝试使用display:inline，但它不起作用。

button {
    display:inline;
}

<button onclick="location.href='?view=list&month=August&year=2014'">Prev</button>
<form action="index?view=list" class="pure-form pure-form-aligned" style="margin:20px;">
    <input type="hidden" name="view" value="list" />
    <select name="month" onchange="this.form.submit();">
        <option value="January" >January</option>
        <option value="February" >February</option>
        <option value="March" >March</option>
        <option value="April" >April</option>
        <option value="May" >May</option>
        <option value="June" >June</option>
        <option value="July" >July</option>
        <option value="August" >August</option>
        <option value="September" Selected>September</option>
        <option value="October" >October</option>
        <option value="November" >November</option>
        <option value="December" >December</option>
    </select>
    <select name="year" onchange="this.form.submit();">
    	<option value="2014" selected>2014</option><option value="2013">2013</option><option value="2012">2012</option>    </select>
</form>
<button onclick="location.href='?view=list&month=October&year=2014'">Next</button>

Answer 1

＆＃13;

button,
form {
  display: inline-block;
}

＆＃13;

<button onclick="location.href='?view=list&month=August&year=2014'">Prev</button>
<form action="index?view=list" class="pure-form pure-form-aligned" style="margin:20px;">
  <input type="hidden" name="view" value="list" />
  <select name="month" onchange="this.form.submit();">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September" Selected>September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
  </select>
  <select name="year" onchange="this.form.submit();">
    <option value="2014" selected>2014</option>
    <option value="2013">2013</option>
    <option value="2012">2012</option>
  </select>
</form>
<button onclick="location.href='?view=list&month=October&year=2014'">Next</button>

＆＃13;

Answer 2

因为<form>个节点具有块样式。将显示更改为inline-block以解决此问题。

form {
     display: inline-block;
}

<button onclick="location.href='?view=list&month=August&year=2014'">Prev</button>
<form action="index?view=list" class="pure-form pure-form-aligned" style="margin:20px;">
    <input type="hidden" name="view" value="list" />
    <select name="month" onchange="this.form.submit();">
        <option value="January" >January</option>
        <option value="February" >February</option>
        <option value="March" >March</option>
        <option value="April" >April</option>
        <option value="May" >May</option>
        <option value="June" >June</option>
        <option value="July" >July</option>
        <option value="August" >August</option>
        <option value="September" Selected>September</option>
        <option value="October" >October</option>
        <option value="November" >November</option>
        <option value="December" >December</option>
    </select>
    <select name="year" onchange="this.form.submit();">
    	<option value="2014" selected>2014</option><option value="2013">2013</option><option value="2012">2012</option>    </select>
</form>
<button onclick="location.href='?view=list&month=October&year=2014'">Next</button>

表单和其他按钮不会显示为内联

2 个答案: