我想要一个<p>标签并<select>在同一条线上。
到目前为止我尝试过的一切都没有奏效。以下是我目前拥有的
<style type="text/css">
#platformRating select,
#platformRating p {
display: inline;
vertical-align: top;
line-height: 28px;
}
</style>
<div style="float: left; margin-left: 10px;">
<div id="platformRating">
<p>Platform:</p>
<select id="cboPlatform" name="cboPlatform">
<option>General</option>
<option>Android</option>
<option>Windows</option>
<option>Web Service</option>
</select>
</div>
<textarea id="txtRatingDescription" name="txtRatingDescription" placeholder="Enter your comment here"></textarea>
</div>
Run Code Online (Sandbox Code Playgroud)
显然,样式部分在<head>文档中,其余部分在<body>.
该<p>platform</p>和<select>在同一行,然后将文本区域的下方,但是,每一个元素上,我不想要一个新的生产线,所以我将如何解决这个问题?
我发现@Nit 的答案是正确的,只是我有一个小问题,我忘记了它导致 Nit 的答案不起作用。
在我的样式表中,我的select输入具有以下 CSS 。
select
{
display: block;
margin: 0;
width: 100%;
height: 44px;
appearance: none;
font-size: 18px;
font-family: sans-serif;
transition: all .2s ease-in-out;
}
Run Code Online (Sandbox Code Playgroud)
上面的样式适用于我的整个网站,但是我尝试添加的这个选择框我不想关注网站的其余部分,我希望它有所不同。所以我的样式表的这个选择样式导致它不在同一行显示。如果我删除它,那么它会显示在同一行上。我可以为这个选择添加一个类以使其与我想要的这种样式一起使用吗?
只需使用内联显示。
#platformRating {
display: inline-block;
}Run Code Online (Sandbox Code Playgroud)
<style type="text/css">
#platformRating select,
#platformRating p {
display: inline;
vertical-align: top;
line-height: 28px;
}
</style>
<div style="float: left; margin-left: 10px;">
<div id="platformRating">
<p>Platform:</p>
<select id="cboPlatform" name="cboPlatform">
<option>General</option>
<option>Android</option>
<option>Windows</option>
<option>Web Service</option>
</select>
</div>
<textarea id="txtRatingDescription" name="txtRatingDescription" placeholder="Enter your comment here"></textarea>
</div>Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
11039 次 |
| 最近记录: |