有没有办法在两个浮动元素之间放置h1？

时间：2019-05-21 05:04:28

标签： html css

我正在尝试使网站的标题位于徽标和导航栏之间，同时还要在导航栏下方进行包装。

我尝试过将徽标向左浮动，将导航元素向右浮动，但是导航位于h1下。这是由于html标记的布局所致，我不允许对其进行修改。

这是期望的结果：

enter image description here 

header figure {
  display: inline-block;
  margin: 0px;
  margin-right: 40px;
  float: left;
}

nav {
  float: right;
}

nav ul {
  padding: 0px;
  margin: 0px;
}

nav li {
  display: inline-block;
  text-align: center;
  width: 70px;
  padding: 2px 4px;
  border-style: dotted;
  border-width: 1px;
}

h1 {
  font-family: 'great-vibes';
  font-size: 50px;
  margin: 0px;
}
<header>
  <figure>
    <img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
  </figure>
  <h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a>About</a></li>
      <li><a href="league.html">League</a></li>
      <li><a href="ethics.html">Ethics</a></li>
    </ul>
  </nav>
</header>

7 个答案:

答案 0 :(得分：1)

无法移动DOM中的元素，您需要做两件事。使用绝对定位将菜单移至右上角，并使用h1元素内的before伪元素构造一个float，以便为菜单留出空间，以使文本不会重叠。像这样：

@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');

header {
  position:relative;
}

header figure {
  display: inline-block;
  margin: 0px;
  margin-right: 20px;
  float: left;
}

nav {
  position:absolute;
  right:0;
  top:0;
}

nav ul {
  padding: 0px;
  margin: 0px;
}

nav li {
  display: inline-block;
  text-align: center;
  width: 70px;
  padding: 2px 4px;
  border-style: dotted;
  border-width: 1px;
}

h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 40px;
  margin: 0px;
  overflow:auto;
}

h1:before {
  content: '';
  float: right;
  width: 340px;
  min-width: calc(100% - 6em);
  height:1em;
}
<header>
  <figure>
    <img src="http://placehold.it/125" alt="MUHC Logo" width="125" height="125">
  </figure>
  <h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a>About</a></li>
      <li><a href="league.html">League</a></li>
      <li><a href="ethics.html">Ethics</a></li>
    </ul>
  </nav>
</header>

答案 1 :(得分：0)

您可以添加h1样式的float属性 类似于以下内容：

<h1 style="float:left"></h1>

答案 2 :(得分：0)

尝试将display：inline-block或display：inline放在h1上。

尝试进行此类操作的好方法是DOM Inspector，它是 在Firefox或Chrome中可用。

Firefox：工具-> Web开发人员->检查器
Chrome：三栏式菜单->更多工具->开发人员工具->元素标签
或其中之一：
右键单击某个元素（例如H1），然后从菜单中选择“检查”或“检查元素”

进入检查器后，可以临时随意添加，删除或修改CSS规则。

对结果感到满意时，可以返回并更新源以合并更改。

编辑： 一个有效的简单更改：
减小H1上的字体大小，使其更合适，
并在上面放上最大宽度，以便所有三个都适合可用空间。

答案 3 :(得分：0)

也将宽度应用于figure和h1，并使用CSS将nav设置为position:absolute以得到所需的结果

header{
  position:relative;
}

header figure {
  display: inline-block;
  margin: 0px;
  margin-right: 40px;
  float: left;
  width:100px;
}

nav {
  position: absolute;
  right: 0;
  top: 0;
}

nav ul {
  padding: 0px;
  margin: 0px;
}

nav li {
  display: inline-block;
  text-align: center;
  width: 70px;
  padding: 2px 4px;
  border-style: dotted;
  border-width: 1px;
}

h1 {
  font-family: 'great-vibes';
  font-size: 30px;
  margin: 0px;
  width:calc(100% - 140px);
  float:left;
  padding-top:25px;
}
<header>
  <figure>
    <img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
  </figure>
  <h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a>About</a></li>
      <li><a href="league.html">League</a></li>
      <li><a href="ethics.html">Ethics</a></li>
    </ul>
  </nav>
</header>

答案 4 :(得分：0)

您可以通过绝对定位和flexbox来实现大多数期望的结果，但是您的h1文本必须更改，以便在“欢迎使用”部分之后中断。 以整页模式查看结果。

header{
	display:flex;
	align-items:center;
	position:relative;
	border:1px solid;
	border-radius:10px;
	padding:10px;
}
header figure{
  display: inline-block;
  margin: 0px;
  margin-right: 40px;
  float: left;
}

nav{
  /* float: right; */
}

nav ul{
	position:absolute;
	top:10px;
	right:10px;
	display:flex;
  padding: 0px;
  margin: 0px;
}

nav li{
  display: inline-block;
  text-align: center;
  width: 70px;
  padding: 2px 4px;
  border-style: dotted;
  border-width: 1px;
}

h1{
  font-family: 'great-vibes';
  font-size: 50px;
  margin: 0px;
}
<header>
  <figure>
     <img src="//unsplash.it/125" alt="MUHC Logo" width="125" height="125">
  </figure>
  <h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
  <nav>
     <ul>
        <li><a href="index.html">Home</a></li>
        <li><a>About</a></li>
        <li><a href="league.html">League</a></li>
        <li><a href="ethics.html">Ethics</a></li>
     </ul>
  </nav>
</header>

答案 5 :(得分：0)

我建议您使用flex CSS。这样，处理页面的响应性要容易得多。我已经使用flex CSS完成了测试代码。希望它能解决您的问题

HTML 

nav ul {
  padding: 0px;
  margin: 0px;
}

nav li {
  display: inline-block;
  text-align: center;
  width: 70px;
  padding: 2px 4px;
  border-style: dotted;
  border-width: 1px;
}

h1 {
  font-family: 'great-vibes';
  font-size: 50px;
  margin: 0px;
}

.d-flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.logo {
  margin-right: 10px;
}
<header>
  <div class="d-flex flex-row">
    <div class="logo">
      <img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
    </div>
    <div>
      <h1>Welcome To <br/>The Mosgiel Underwater Hockey Club</h1>
    </div>
    <div>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a>About</a></li>
          <li><a href="league.html">League</a></li>
          <li><a href="ethics.html">Ethics</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/2eydLcmz/

答案 6 :(得分：0)

使用单个h1标签无法实现您要实现的目标。相反，您需要在h1内创建两个单独的dom元素。因为您需要在Welcome To一词后换行。

检查以下代码段的操作。您也可以使用其他元素样式。

html,
body {
    padding: 0;
    margin: 0;
}

header {
    position: relative;
}

header figure {
    /* display: inline-block;  */       /* <-- Not required when using float */
    float: left;
    margin: 0px;
    margin-right: 40px;
}

nav {
    float: right;
}

nav ul {
    padding: 0px;
    margin: 0px;
}

nav li {
    display: inline-block;
    text-align: center;
    width: 70px;
    padding: 2px 4px;
    border-style: dotted;
    border-width: 1px;
}

h1 {
    font-family: "great-vibes";
    font-size: 40px;
    margin: 0px;
    position: absolute;
    left: 140px;
}

p {
    margin: 0;
}
<header>
    <figure>
        <img src="https://img.icons8.com/ios/2x/stackoverflow-filled.png" alt="MUHC Logo" width="100" height="100" />
    </figure>
    <h1>
        <p>Welcome To</p> 
        <p>
            The Mosgiel Underwater Hockey Club
        </p>
    </h1>
    <nav>
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a>About</a></li>
        <li><a href="league.html">League</a></li>
        <li><a href="ethics.html">Ethics</a></li>
        </ul>
    </nav>
</header>

相关问题
最新问题