html - 如何更改css以显示两个相邻的小部件？

Question

目前我有 2 个小部件显示在彼此之上，一个搜索表单和一个名为 Widget1 的小部件：

  <div class="sc-kasBVs dkZIuy sc-bdVaJa iHZvIS">
    <div class="sc-bdVaJa zWLbK">
        <form>
            <div class="sc-RcBXQ jQyElD InputAddon__StyledInputAddon-fjFrIb fMydIy">
                <div class="sc-giadOv dyqhVk sc-bdVaJa iHZvIS">
                    <div class="sc-fONwsr iJfpTt Select__StyledSelectWrapper-hSZEhI DYFBu" name="searchCriteria" value="custName">
                    </div>
                </div><input class="sc-fcdeBU icqmWO Input__StyledInput-gzbIwR kYVFOW" type="text" placeholder="Enter name"
                    name="fullName" value=""><button class="InputAddonButton__StyledInputAddonButton-hHzFYs kAWAUc AccessibleFocusStyleHOC__StyledComponent-gUjKxJ kwchXi Button__StyledButton-gFCKw dXFaMb"
                    type="submit" label="Go"><span class="Button__InnerSpan-igXdGS hedSKc">Go</span></button>
            </div>
        </form>
    </div>
    <div class="sc-btzYZH eQQfcI sc-htpNat eLQHN sc-bdVaJa iHZvIS">
        <Widget1 />
    </div>
</div>

这是样式表：

@media screen and (min-width: 768px)
<style>…&lt;/style>
.zWLbK {
    width: 100%;
}

@media screen and (min-width: 480px)
<style>…&lt;/style>
.zWLbK {
    width: 100%;
}
<style>…&lt;/style>
.zWLbK {
    box-sizing: border-box;
    width: 100%;
    padding-left: 18px;
    padding-right: 100px;

form {
    display: block;
    margin-top: 0em;
}

div {
    display: block;
}
.eQQfcI {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-right: 147px;
    margin-bottom: 6px;
}
<style>…&lt;/style>
.sc-btzYZH {
}
<style>…&lt;/style>
.eLQHN {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
<style>…&lt;/style>
.sc-htpNat {
}
.iHZvIS {
    box-sizing: border-box;}

我想将表单和 Widget1 并排显示。为什么它们显示在彼此之上？

标签： htmlcssflexboxstyled-components