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

How to make two <p> tags show in the same row

提问by useranon

I want to generate an add and delete in the same row near to each other. (Not in a table)

我想在彼此靠近的同一行中生成添加和删除。（不在桌子上）

$("<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");

How can I get both of them on the same row?

我怎样才能让他们在同一行？

回答by Noon Silk

I suspect you want a style like:

我怀疑你想要这样的风格：

p.cutsom_button { display : inline; }

回答by pavium

Don't use the <p> 'paragraph' tag.

不要使用 <p> 'paragraph' 标签。

回答by MyItchyChin

The p tag is meant to represent a paragraph which is a block of text, thus the display mode is block. You could set the display to inline as others have suggested but this would still be semantically incorrect.

p 标签表示一个段落，它是一个文本块，因此显示模式是块。您可以按照其他人的建议将显示设置为内联，但这在语义上仍然不正确。

Judging by the name of the css class of the object you're inserting them into, fieldChoices, it would suggest that you're adding a list of choices and should therefore be using an unordered list to contain your items.

根据您将它们插入到的对象的 css 类的名称 fieldChoices 判断，它会建议您添加一个选项列表，因此应该使用一个无序列表来包含您的项目。

回答by Chris

I would remove the <p>tag and combine the classes into the <a>tag.

我会删除<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");

or, I would use <span>instead of <p>

或者，我会用<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");

回答by nickf

I think the best solution would be to choose a better tag to markup your buttons. <button>springs to mind...

我认为最好的解决方案是选择一个更好的标签来标记你的按钮。<button>浮现在脑海中……

But anyway, you could use display: inline, or, if you need to be able to set their widths, you can use display: inline-block

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

回答by sathishn

You may use float left for the paragraph

您可以为段落使用左浮动

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

p{
    float:left;
}

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

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

回答by matt

The deleteChoicebutton should be marked with display:inline;in its css

所述deleteChoice按钮应标明显示：内联; 在它的 css 中

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

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

回答by geowa4

Make each floatand specify a width of 50%or less.

制作每个float并指定宽度50%或更少。