Question

嗨我想把我的h2标题和p放在同一行，它们之间有2个空格。我已经尝试了几乎所有的解决方案，但我不知道我做错了什么。这是我的CSS和HTML：

h3 {
  float: right;
  padding: 0;
  margin: 0;
  left: 20px;
  display: inline;
  color: #00cccc;
}
publish_date {
  text-align: left;
  padding: 0;
  margin: 0;
  color: #ff0033
}

<publish_date>Lorem ipsum</publish_date>
<h3>Sit amet</h3>

Answer 1

测试一下！

<强> CSS ：

p, h3{
    display: inline-block; /* display on the same line */
}
h3{
    position: relative;
    left: 20px; /* this will not work without setting position property */
    padding: 0;
    margin: 0;
    color: #00cccc;
    float: right;
}

p{
    padding: 0;
    margin: 0;
    color: #ff0033
    text-align: left;
}

<强> HTML ：

<p><?php echo $the_publish_date ?></p><h3><?php echo $article_title1 ?></h3>

仅为了您的信息，正如 Muhammad Usman 所述，＆＃34; <publish-date>不是有效的HTML代码＆＃34;，而您可以这样做对此，没有真正的意义。您也可以坚持使用原生的<p>或<span>代码。

希望它有所帮助！

JSFiddle：https://jsfiddle.net/n3kmd9ye/

Answer 2

添加到h3 float:left; margin-right:10px; float：left将彼此相邻并且使用margin-right来控制它们之间的距离。

＆＃13;

h3 {
  float: right;
  padding: 0;
  margin: 0;
  left: 20px;
  display: inline;
  color: #00cccc;
  float:left;
  margin-right:10px;
}
publish_date {
  text-align: left;
  padding: 0;
  margin: 0;
  color: #ff0033
}

＆＃13;

<publish_date>Lorem ipsum</publish_date>
<h3>Sit amet</h3>

＆＃13;

H2和P在同一行（HTML，CSS，PHP）

2 个答案: