如何使两个<p>标签在同一行显示

Question

我希望在同一行上生成一个相邻的添加和删除按钮（不是在表格中）。

$("<p class='addChoice cutsom_button'><a href='#' class='btn lbOn addchoice'><span class='button_image'><span class='background_16 user_reply'>Add</span></span></a></p>").appendTo(".fieldChoices");

$("<p class='deleteChoice cutsom_button'><a href='#' class='btn lbOn deletechoice'><span class='button_image'><span class='background_16 user_reply'>Delete</span></span></a></p>").appendTo(".fieldChoices");

我该如何让它们同时排在一行？

- useranon

---

我不明白你的问题？你是想要将这两行代码合并还是要实现另外的功能/代码等等？ - Phill Pafford

他想在UI上的同一行上添加和回复。但由于<p>的存在，现在“回复”位于“添加”下方。 - Natrium

Answer 1

我猜您想要的样式是：

p.cutsom_button { display : inline; }

- Noon Silk

---

如果内容足够短，可以放在同一行上，那么这个程序才能正常工作。 - geowa4

但是，从问题中的示例来看，可能是这种情况。我认为silky的答案最接近要求“使两个p标签显示在同一行”+1。 - pavium

结合使用 'white-space:nowrap;'，可以使文本在换行时保持在同一行上。 - Marien

Answer 2

不要使用“段落”标签<p>。

- pavium

---

下次请考虑写一条注释。 - Georg Schölly

@gs：为什么？我本可以再详细解释一下，比如提供一个替代方案或者解释为什么他不应该使用<p>，但这是一个完全有效的答案。 - Graeme Perrow

是的，我写完这个答案后就觉得它不太好。我还评论说@silky的答案似乎更正确。但我很感激大家的赞同。我会努力不浪费它们的。 - pavium

Answer 3

p标签用于表示一个段落，即文本块，因此显示模式为块级。其他人建议将显示设置为内联，但这仍然是语义上不正确的。

根据您插入对象的CSS类名fieldChoices的名称，可以推断出您正在添加一组选项，并且应该使用无序列表来包含您的项目。

- MyItchyChin

Answer 4

我会移除 <p> 标签并将类合并到 <a> 标签中。

$("<a href='#' class='cutsom_button btn lbOn addchoice'><span class='button_image'><span class='background_16 user_reply'>Add</span></span></a>").appendTo(".fieldChoices");

$("<a href='#' class='cutsom_button btn lbOn deletechoice'><span class='button_image'><span class='background_16 user_reply'>Delete</span></span></a></p>").appendTo(".fieldChoices");

或者，我会使用<span>代替<p>。

$("<span class='addChoice cutsom_button'><a href='#' class='btn lbOn addchoice'><span class='button_image'><span class='background_16 user_reply'>Add</span></span></a></span>").appendTo(".fieldChoices");

$("<span class='deleteChoice cutsom_button'><a href='#' class='btn lbOn deletechoice'><span class='button_image'><span class='background_16 user_reply'>Delete</span></span></a></span>").appendTo(".fieldChoices");

- Chris

Answer 5

你可以使用“浮动左侧”来控制段落。

<p>Please check this p tag</p><p>Second p tag</p>

p{
    float:left;
}

http://jsfiddle.net/W2kYm/1/

- sathishn

Answer 6

deleteChoice 按钮在其 CSS 中应标记为 display:inline;

http://www.tizag.com/cssT/display.php

- matt

Answer 7

我认为最好的解决方案是选择更好的标签来标记您的按钮。 <button> 会让人想起...

但无论如何，您可以使用 display: inline，或者如果您需要设置它们的宽度，可以使用 display: inline-block

- nickf

Answer 8

将每个 float 元素的宽度设为 50% 或更小。

- geowa4