时间戳

首页 > 解决方案 > 如何在html中将元素设置为右侧？

html - 如何在html中将元素设置为右侧？

问题描述

我正在尝试将切换按钮设置在右侧。浮动，对：0，align-self 不适合我。

我究竟做错了什么 ？

图片在最后。

HTML：

 <div if:true={showCards} class='main-container'>
        <div class="main-container-top"> 

            <p class="currs-available"> {trainingPlans.length} {headerLabel} </p>

            <lightning-input 
                class="search slds-p-vertical_small" 
                type="search" 
                onchange={handleSearch} 
                variant="label-hidden"
                placeholder="Search" >
            </lightning-input>

         <c-toggle-button
            class="toggle"
            buttons={toggleData}
            ontoggleswitch={handleToggleSwitch}
            default=1>
         </c-toggle-button>

        </div>
.............
......
.....

和相关的CSS：

.main-container{
    background: #f5f5f5;
}

.main-container-top{
    display: flex;
}

.currs-available{
    width: 33%;
    font-size: 20px;
    font-weight: 700;
    padding: 9px 0 0 20px;
}

.toggle{
    width: 33%;
}

元素图像

标签： htmlcss

解决方案

position: absolute;如果您正在使用，您可以使用right: 0;

虽然，display: flex;将被忽略

推荐阅读