我想添加*以显示为必填字段。当我在输入类型文本后面放置span标签时，它显示在同一行中。
.holder_options_1 {
color: red !important;
}<div class="col-sm-6" style="padding-left: 11px;">
<input type="text" name="tags" id="xyz">
<span class="holder_options_1">*</span>
</div>
但是当我在下一行显示输入类型文件后放置相同的span标记时。
.holder_options_1 {
color: red !important;
}<div class="col-sm-6" style="padding-left: 11px;">
<input type="file" name="fileupload" accept=".jpg,.png,.jpeg" id="fileToUpload" style="height:33px">
<span class="holder_options_1">*</span>
</div>
为什么会这样？ 我希望span标签也在同一行。怎么做？请解释。 在此先感谢。
答案 0 :(得分：0)
默认情况下，span标记有display: inline，他的行为就像文本一样。如果您的父母太小，则跨度转到下一行。
答案 1 :(得分：0)
默认情况下 span，p 具有 white-space: normal 值。我使用了 white-space: nowrap。希望，它起作用了！
p.ws-normal {
white-space: normal;
}
p.ws-nowrap {
white-space: nowrap;
}<h2>Default</h2>
<p class="default">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam porro, maiores ipsam modi placeat magnam autem! Harum aliquam, tenetur fuga perferendis corporis id quisquam a saepe nam earum fugit inventore sit suscipit enim provident ratione tempora architecto molestias natus ex? Natus veniam expedita quia fuga officiis et repellat aliquid quasi nisi cupiditate sunt, aperiam quos eum possimus sed distinctio ab accusantium sequi blanditiis nam maxime eligendi molestiae ut? Assumenda, accusamus vero quidem fugiat ab beatae adipisci deserunt veritatis libero vel blanditiis facere? Voluptas rem veritatis quam tempora. Dolore sit numquam dignissimos debitis facere quia in nulla autem fugiat facilis? Exercitationem, et. Praesentium, modi consequuntur ex asperiores rerum possimus et, atque rem at suscipit necessitatibus alias, dolorem commodi! Eius amet nisi quaerat fuga natus harum ipsum ut magnam. Unde debitis iusto, repudiandae voluptatibus qui quibusdam architecto nesciunt harum sed eligendi facilis provident totam praesentium distinctio sit? Repudiandae aut a recusandae? Suscipit maiores, minus sed dolorem qui quia. Accusantium sint omnis veritatis error rerum quis, laboriosam, optio autem nesciunt corrupti consectetur necessitatibus! Praesentium quae, at corrupti officiis quas pariatur laboriosam numquam velit voluptatum in quasi assumenda? Rerum cumque animi nihil maxime, asperiores quo enim adipisci molestias possimus consectetur accusantium! Molestiae, sapiente praesentium.
</p>
<h2>Tried "white-space: normal"</h2>
<p class="ws-normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam porro, maiores ipsam modi placeat magnam autem! Harum aliquam, tenetur fuga perferendis corporis id quisquam a saepe nam earum fugit inventore sit suscipit enim provident ratione tempora architecto molestias natus ex? Natus veniam expedita quia fuga officiis et repellat aliquid quasi nisi cupiditate sunt, aperiam quos eum possimus sed distinctio ab accusantium sequi blanditiis nam maxime eligendi molestiae ut? Assumenda, accusamus vero quidem fugiat ab beatae adipisci deserunt veritatis libero vel blanditiis facere? Voluptas rem veritatis quam tempora. Dolore sit numquam dignissimos debitis facere quia in nulla autem fugiat facilis? Exercitationem, et. Praesentium, modi consequuntur ex asperiores rerum possimus et, atque rem at suscipit necessitatibus alias, dolorem commodi! Eius amet nisi quaerat fuga natus harum ipsum ut magnam. Unde debitis iusto, repudiandae voluptatibus qui quibusdam architecto nesciunt harum sed eligendi facilis provident totam praesentium distinctio sit? Repudiandae aut a recusandae? Suscipit maiores, minus sed dolorem qui quia. Accusantium sint omnis veritatis error rerum quis, laboriosam, optio autem nesciunt corrupti consectetur necessitatibus! Praesentium quae, at corrupti officiis quas pariatur laboriosam numquam velit voluptatum in quasi assumenda? Rerum cumque animi nihil maxime, asperiores quo enim adipisci molestias possimus consectetur accusantium! Molestiae, sapiente praesentium.
</p>
<h2>Answer: "white-space: nowrap"</h2>
<p class="ws-nowrap">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam porro, maiores ipsam modi placeat magnam autem! Harum aliquam, tenetur fuga perferendis corporis id quisquam a saepe nam earum fugit inventore sit suscipit enim provident ratione tempora architecto molestias natus ex? Natus veniam expedita quia fuga officiis et repellat aliquid quasi nisi cupiditate sunt, aperiam quos eum possimus sed distinctio ab accusantium sequi blanditiis nam maxime eligendi molestiae ut? Assumenda, accusamus vero quidem fugiat ab beatae adipisci deserunt veritatis libero vel blanditiis facere? Voluptas rem veritatis quam tempora. Dolore sit numquam dignissimos debitis facere quia in nulla autem fugiat facilis? Exercitationem, et. Praesentium, modi consequuntur ex asperiores rerum possimus et, atque rem at suscipit necessitatibus alias, dolorem commodi! Eius amet nisi quaerat fuga natus harum ipsum ut magnam. Unde debitis iusto, repudiandae voluptatibus qui quibusdam architecto nesciunt harum sed eligendi facilis provident totam praesentium distinctio sit? Repudiandae aut a recusandae? Suscipit maiores, minus sed dolorem qui quia. Accusantium sint omnis veritatis error rerum quis, laboriosam, optio autem nesciunt corrupti consectetur necessitatibus! Praesentium quae, at corrupti officiis quas pariatur laboriosam numquam velit voluptatum in quasi assumenda? Rerum cumque animi nihil maxime, asperiores quo enim adipisci molestias possimus consectetur accusantium! Molestiae, sapiente praesentium.
</p>
<h2>These all are also working for "span" tag</h2>