您可以将两个单独的 p 标签放在同一行并仍然单独编辑它们吗答案

【问题标题】：Can you put two separate p tags on the same line and still edit them separately您可以将两个单独的 p 标签放在同一行并仍然单独编辑它们吗
【发布时间】：2014-02-02 16:05:04
【问题描述】：

所以我的页面上有一个水平条，我想在那个条上放几个 <p> 标签，这样当我以后想开始制作响应式布局时，可以在到达时将它们删除特定的屏幕尺寸。但我想知道的是，我怎样才能将这些p 部分放在同一行而不将一个向下推到包含部分的下方？我使用了display:inline 和float: left，但我不喜欢这样，因为您不能将文本格式化为text-align: right，或者让它与屏幕左侧有特定距离。例如，如果你输入margin-left: 6%，它不会离屏幕左侧 6%，它会离它之前的元素 6%，我不希望这样。我假设总体结果将是绝对定位，但我想先看看是否有其他选择。

【问题讨论】：

标签： html css text position

【解决方案1】：

将display:inline-block; 给你的p 类和一个适当的width，它们将排成一行，display:inline 删除了为元素提供尺寸的选项！这样做：

demo here

p {
    height:100%;
    width:50%;
    display:inline-block;
    border:1px solid red;
}

【讨论】：

这确实有助于解决有关边距格式/文本对齐的问题，但我仍然遇到第二个文本低于第一个文本的问题。我所做的是让div 容器中的所有p 具有display:inline-block、height:100% 和width:100%，并且每个p 都有一个定义的width，其中margin 和padding 为零（因为我只是想先把所有东西都设置好）Screenshot
这里只是带有文本栏的部分。如果可能的话，我也希望a 也可以在线路之外，但如果必须，我可以随时将其切换回position:absolute。

【解决方案2】：

display:inline-block 是关键

inline 和 inline-block 的主要区别在于，inline-block 允许您指定元素的尺寸、填充和边距，而 inline 块只是包裹元素。

【讨论】：

【解决方案3】：

试试display:inline，然后给paddings，就像这样：

p{
    display:inline;
    padding:5px;
}

这是一个演示：http://jsfiddle.net/gyHXx/

【讨论】：