Question

我希望<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>

显然，样式部分位于文档的<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;
}

上面的风格是我的整个网站，但是我想添加的这个选择框我不想跟随网站的其余部分，我希望它与众不同。因此，为样式表选择样式会导致它不显示在同一行上。如果我删除它，那么它显示在同一行。我可以在这个选项中添加一个类，使其适用于我想要的这种风格吗？

Answer 1

只需使用内嵌显示。

#platformRating {
  display: inline-block;
}

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

Answer 2

使用<label>标记命名select选项会更合适。 <p>标记隐式显示为block，因此根据Nit的建议，您可以将其更改为inline-block。

使用label的示例：

        <label for="cboPlatform">Platform:</label>
        <select id="cboPlatform" name="cboPlatform">
            <option>General</option>
            <option>Android</option>
            <option>Windows</option>
            <option>Web Service</option>
        </select>

Answer 3

简而言之，请使用：display : inline-block Here is the difference between inline, block and inline block

在同一行上有P和Select标记

更新

3 个答案: