Question

我似乎无法使搜索按钮和输入框在同一行上对齐...目前文本框位于搜索按钮上方...任何提示？

<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="@Url.ArticulateSearchUrl(Model)">
    <input type="text" name="term" class="form-control" placeholder="Search">
    <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->

Answer 1

问题在于<div> <h2>和<form>是display:block并填充其容器的宽度

您可以将HTML转换为

<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="@Url.ArticulateSearchUrl(Model)">
    <input type="text" name="term" class="form-control" placeholder="Search">
    <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>

并添加此CSS

.headline-md,h2,form{
   display:inline-block;
}

.headline-md{
width:80px;
margin-right:15px;
}

我添加了!important来强制执行新的CSS规则。我添加了一个代码片段来演示代码。

    .headline-md,h2,form{
       display:inline-block !important;
    }

    .headline-md{
    width:80px !important;
    margin-right:15px !important;
    }

<div class="headline headline-md"><h2>Search</h2></div>
    <form method="get" action="@Url.ArticulateSearchUrl(Model)">
        <input type="text" name="term" class="form-control" placeholder="Search">
        <span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
    </form>

Answer 2

我明白了。这就是诀窍：

let earth = {
    x,
    y,
    z,
    orbitDistance,
    angle,
    angleSpeed
}

let moon = {
    x,
    y,
    z,
    orbitDistance,
    angle,
    angleSpeed
}

// Assume the object properties are filled out

earth.x = earth.orbitDistance * Math.sin( earth.angle );
earth.z = earth.orbitDistance * Math.cos( earth.angle );

// Starting from the Eath's position will make it the origin of the Moon's orbit
moon.x = earth.x + moon.orbitDistance * Math.sin( moon.angle );
moon.z = earth.z + moon.orbitDistance * Math.cos( moon.angle );

earth.angle += earth.angleSpeed;
moon.angle += moon.angleSpeed;

搜索表格相同的行

2 个答案: