Question

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

Answer 1

将display:inline-block;提供给您的p课程和正确的width，他们会排成一行，display:inline删除为元素提供维度的选项！这样做：

demo here

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

Answer 2

显示：内联块是键

内联块和内联块之间的主要区别在于，内联块允许您指定元素的尺寸，填充和边距，而内联块只是包装元素。

Answer 3

尝试display:inline并按照您的意愿提供paddings：

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

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

您可以在同一行上放置两个单独的p标签，并仍然可以单独编辑它们

3 个答案: