CSS对齐文本与选择在同一行

我想对齐2 html在同一行中的div，但我找不到办法做到这一点。我试着用CSS对齐文本与选择在同一行

position:relative;

父

和

position:absolute;

在孩子的

，但没有成功，似乎只能用文字工作。

This is the Fiddle

来源

2016-03-04 Gonzalo Hernandez

删除保证金右：50％，并添加浮动：左边。right div –

都设置div元件float: left并从.right类取出margin-right。

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

div现在将在同一行，但它可能还没有出现。删除p元素的默认margin，您就全部设置好了。

p { 
    margin: 0; 
}

Demo

下面

全码：

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

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

 
p { 
 
    margin: 0; 
 
}

<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>

来源

2016-03-04 10:24:18 Chris

谢谢，这正是我想要的，只是一个简单的问题，为什么有必要给这两个元素float：left;这似乎不是“逻辑”。 –

@Ghm你也可以通过使用span标签来实现这一点。 – praveen

第一个'div'浮动到左边，并且你希望第二个'div'水平地“堆叠”在第一个旁边。 'float：right'也可以，但在这种情况下我不会推荐它。只需在互联网上阅读'浮动':) – Chris

删除margin-right: 50%;，给float: left;到.right

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

Fiddle

来源

2016-03-04 10:24:28 ketan

尝试使用显示：内联块。

.left { 
    float: left; 
    width: 50%; 
    display: inline-block; 
} 

.right { 
    width: 50%; 
    display: inline-block; 
}

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

来源

2016-03-04 10:28:40

这仅适用于'.left'具有'float：left'。由于'inline-block'的性质，如果删除'float'，它将不能在两个宽度都为'50％'的情况下工作。 – Chris

使用display:flex;在你parent类。并从p标记中移除默认边距。

CSS

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

    p{ 
     margin:0; 
    }

看到demo

来源

2016-03-04 10:30:08

尝试......小提琴链接Fiddle。您能够在标签设置Mostrar

<span>Mostrar:</span>

来源

2016-03-04 10:31:43 praveen

试试这个代码：

小提琴链接： 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; } 
}

来源

2016-03-04 10:35:50 SekDinesh

CSS对齐文本与选择在同一行

回答

相关问题