如何在HTML中不使用flexbox实现品牌名称位于logo右侧的布局效果

修复方案 #

你只给logo外层的a标签设置了左浮动，品牌名所在的.navbar-brand默认是块级元素会独占一行，所以无法并排显示。按下面的方案修改即可，全程不使用flex布局：

• 给.navbar-brand也添加左浮动，同时设置合适的上下内边距实现和logo的垂直对齐
• 给父容器.navbar-header添加清除浮动规则，避免父容器高度塌陷

修改后的完整CSS代码如下：

body {
  font-size: 16px;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: gold;
}

#logo-img {
  background: url("BurgerKING1.png") no-repeat;
  width: 152px;
  height: 152px;
  margin: 10px 15px 10px 0;
}

/* 以下为新增样式 */
.navbar-brand {
  float: left;
  /* 可根据你的实际字体大小微调数值，实现垂直居中 */
  padding-top: 65px;
  padding-bottom: 65px;
}
.navbar-brand h1 {
  /* 清除h1默认边距避免打乱对齐 */
  margin: 0;
}
/* 清除父容器浮动 */
.navbar-header::after {
  content: "";
  display: table;
  clear: both;
}

你不需要改动原有HTML代码，把上述CSS补充到你的样式文件中即可实现需求。

内容的提问来源于stack exchange，提问作者Devanshu Sharma