Home / Questions / 339752
Accepted
Gian Franco Alexis Poma Vidal
Asked: 2020-03-26 19:08:36 +0800 CST 2020-03-26 19:08:36 +0800 CST

在不使用浮动的情况下将元素定位到右侧

  • 772

有没有办法在不使用浮动的情况下将此侧边栏定位到右侧？发生的事情是它为我撤消了其他元素，并且还调查了使用它是一种不好的做法。

#sidebar{
    width: 25%;
    margin-bottom: 30px;
    display: inline-block;
    background: orange;
    padding: 30px;
    border: orange;
}

.sidebar-item{
    background: #f7f7f7;
    padding: 20px;
    margin-top: 30px;
}

.sidebar-item h3{
    text-transform: uppercase;
    font-size: 18px;
    margin:0px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 3px solid #eee;
}

.sidebar-item .btn{
    margin: 0px auto;
    margin-top: 10px;
}

.btn{
   display: block;
   background: black;
   color: white;
   padding: 15px; 
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;
   text-decoration: none;
   transition: 300ms all;
   border: none;
   cursor:pointer;
   width: 50%;
   text-align: center;
   font-weight: bold;
}

.btn-success{
    background: rgb(23, 150, 19);
}

.btn-success:hover{
    background:black;
}

input{
width:100%;
}
<aside id="sidebar">
    <div id="nav-blog" class="sidebar-item">
        <h3>Puedes hacer esto</h3>
        <a href="#" class="btn btn-success">Crear artículo</a>
    </div>

    <div id="search" class="sidebar-item">
            <h3>Buscador</h3>
            <p>Encuentra el artículo que buscas</p>
            <form>
                <input type="text" name="search" />
                <input type="submit" name="submit" value="Buscar" class="btn" />
            </form>
    </div>
</aside>

html

1 Answers

  1. Best Answer

    由于您的布局没有更多上下文，也就是说，如果这aside是直接子body标签或其他标签，那么我将告诉您以下内容：

    • 标签aside必须包含在一个较大的标签中，该标签是其父标签。
    • 对于包含它的标签，我们将给出一个display: flex;
    • 默认情况下，所有带有 flex 的元素都在水平轴或主轴上对齐，所以我们给它一个justify-contentend 值，以便它移动到行的末尾

    就是这样：

        <style>
      body {
        display: flex;
        justify-content: flex-end;
      }
    #sidebar{
        width: 25%;
        margin-bottom: 30px;
        background: orange;
        padding: 30px;
        border: orange;
    }
    
    .sidebar-item{
        background: #f7f7f7;
        padding: 20px;
        margin-top: 30px;
    }
    
    .sidebar-item h3{
        text-transform: uppercase;
        font-size: 18px;
        margin:0px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 3px solid #eee;
    }
    
    .sidebar-item .btn{
        margin: 0px auto;
        margin-top: 10px;
    }
    
    .btn{
       display: block;
       background: black;
       color: white;
       padding: 15px; 
       font-weight: bold;
       text-transform: uppercase;
       font-size: 14px;
       text-decoration: none;
       transition: 300ms all;
       border: none;
       cursor:pointer;
       width: 50%;
       text-align: center;
       font-weight: bold;
    }
    
    .btn-success{
        background: rgb(23, 150, 19);
    }
    
    .btn-success:hover{
        background:black;
    }
    
    input{
    width:100%;
    }
    </style>
    
    <aside id="sidebar">
        <div id="nav-blog" class="sidebar-item">
            <h3>Puedes hacer esto</h3>
            <a href="#" class="btn btn-success">Crear artículo</a>
        </div>
    
        <div id="search" class="sidebar-item">
                <h3>Buscador</h3>
                <p>Encuentra el artículo que buscas</p>
                <form>
                    <input type="text" name="search" />
                    <input type="submit" name="submit" value="Buscar" class="btn" />
                </form>
        </div>
    </aside>

    顺便说一句，使用未弃用的属性和值并不是一个坏习惯，您只需要了解它们适用于哪些场景以及不适用于哪些场景。

    • 2