Question

我试图在html的同一行中对齐2个div，但我找不到办法。我尝试使用

   position:relative;

父母的

和

position:absolute;

在孩子们中，但没有成功，似乎只适用于文字。

This is the Fiddle

Answer 1

将div个元素设置为float: left，然后从margin-right类中删除.right。

.right {
  float: left;
  width: 50%;
}

div现在将在同一条线上，但它可能不会出现。删除margin元素的默认p，您已全部设置。

p {
  margin: 0;
}

Demo

以下完整代码：

＆＃13;

.left{
  float:left;
  width: 50%;
}

.right {
  width: 50%;
  float: left;
}

p {
  margin: 0;
}

＆＃13;

<div class="parent">
  <div class="left">
    <span>SOME TEXT</span>
  </div>
  <div class="right">
    <p>Mostrar:&nbsp</p>
    <select>
      <option value="todas">TEXT</option>
      <option value="leidas">TEXT</option>
      <option value="noLeidas">TEXT</option>
    </select>
  </div>
</div>

＆＃13;

Answer 2

删除margin-right: 50%;并将float: left;提供给.right

.right {
    float: left;
    width: 50%;
}

<强> Fiddle

Answer 3

尝试使用display：inline-block。

C2027 use of undefined type 'GLFWwindow'
C2338 can't delete an incomplete type
C4150 deletion of pointer to incomplete type 'GLFWwindow';no destructor called

https://jsfiddle.net/thinhn1992/kro2fxz3/

Answer 4

在display:flex;课程中使用parent。并从p代码中删除默认边距。

<强> CSS

 .parent {  
      overflow:hidden;
      background: yellow;
      width:90%;
      display:flex;
      align-items: flex-start;
    }

    p{
      margin:0;
    }

请参阅demo

Answer 5

试试这个...小提琴链接Fiddle。您可以在span标签中设置Mostrar

<span>Mostrar:</span>

Answer 6

试试这段代码：

小提琴链接： Fiddle Link

使用响应式布局

    .parent {  
  position: relative;

}
.left{
 border: 1px solid; 

}

.right {
  border: 1px solid;
}

@media screen and (min-width: 47.5em ) {
  .left { margin-right: 19.5em; }

    .right { position: absolute; top: 0; right: 0; width: 18.75em; }   
}

CSS在同一行中将文本与选中对齐

6 个答案: