8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

右对齐 h1 元素,使其右侧不起作用

JoJoJohan 2月前

58 0

我无法让标题 h1 元素与页面的右侧对齐。html,body { height: 100%; margin: 0; font-family: Arial, sans-serif;}body { display: flex; flex-directi...

我无法让标题 h1 元素与页面的右侧对齐。

html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 20px;
  margin-bottom: 50px;
  /* Adds additional space at the bottom */
  padding: 10px;
  border: 6px solid black;
  /* Add a rectangle (border) around the container */
  display: inline-block;
  /* Shrink to fit the content */
  text-align: right;
  width: fit-content;
}

.title h1 {
  margin: 5px 0;
  /* Margin between each h1 element */
  white-space: nowrap;
  /* Prevent line breaks, keep h1 on one line */
}

.content {
  flex: 1;
  margin: 20px;
  text-align: left;
}

.bottom {
  margin: 20px;
  margin-bottom: 50px;
  /* Adds additional space at the bottom */
  padding: 10px;
  border: 6px solid black;
  /* Add a rectangle (border) around the container */
  display: inline-block;
  /* Shrink to fit the content */
  text-align: left;
  width: fit-content;
}

.bottom h1 {
  margin: 5px 0;
  /* Margin between each h1 element */
  white-space: nowrap;
  /* Prevent line breaks, keep h1 on one line */
}
<div class="title">
  <a href="index.html">
    <h1>AMIR TEYMURI</h1>
  </a>
</div>

<div class="content">
  <h2>List of compositions</h2>
  <p>Content...</p>
</div>

<div class="bottom">
  <a href="bio.html">
    <h1>BIOGRAPHY</h1>
  </a>
  <a href="misc.html">
    <h1>MISCELLANEOUS</h1>
  </a>
  <a href="contact.html">
    <h1>CONTACT</h1>
  </a>
</div>
帖子版权声明 1、本帖标题:右对齐 h1 元素,使其右侧不起作用
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由JoJoJohan在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
  • \'我无法让标题 h1 元素与页面右侧对齐。\'

    如果要将元素移到右侧,只需使用 align-self 弹性框的属性即可。设置时使用弹性框。

    另一种方法可能是“网格布局”,但为此您需要更多地改变 CSS 和 HTML。

    最后一个可能的选择是 position: absolute 。但我不推荐它。

    body {
      display: flex;
      flex-direction: column;
    }
    
    .title {
      margin: 20px;
      margin-bottom: 50px;
      padding: 10px;
      border: 6px solid black;
      display: inline-block;
      text-align: right;
      width: fit-content;
      align-self: end; /*This makes use of the set flex on the body and aligns the item to the right.*/
    }
    
    .title h1 {
      margin: 5px 0;
      white-space: nowrap;
    }
    
    .content {
      flex: 1;
      margin: 20px;
      text-align: left;
    }
    
    .bottom {
      margin: 20px;
      margin-bottom: 50px;
      padding: 10px;
      border: 6px solid black;
      display: inline-block;
      text-align: left;
      width: fit-content;
    }
    
    .bottom h1 {
      margin: 5px 0;
      white-space: nowrap;
    }
    <div class="title">
      <a href="index.html">
        <h1>AMIR TEYMURI</h1>
      </a>
    </div>
    
    <div class="content">
      <h2>List of compositions</h2>
      <p>Content...</p>
    </div>
    
    <div class="bottom">
      <a href="bio.html">
        <h1>BIOGRAPHY</h1>
      </a>
      <a href="misc.html">
        <h1>MISCELLANEOUS</h1>
      </a>
      <a href="contact.html">
        <h1>CONTACT</h1>
      </a>
    </div>
  • 有很多方法可以做到这一点,其中一种方法是将添加 width: 100% title 类中。如果您只需要将边框设置为链接本身,则可能需要将更改为 border 标签 a

    编辑:正如你 flex body ,我想最好的方法是使用 align-self: flex-end .

    html,
    body {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      flex-direction: column;
      margin: 0;
    }
    
    .title {
      width: fit-content;
      align-self: flex-end;
      margin: 20px;
      margin-bottom: 50px;
      padding: 10px;
      border: 6px solid #000;
    }
    
    .title>a {
    
    }
    
    .content {
      flex: 1;
      margin: 20px;
      text-align: left;
    }
    
    .bottom {
      margin: 20px;
      margin-bottom: 50px;
      padding: 10px;
      border: 6px solid black;
      text-align: left;
      width: 100%; 
      box-sizing: border-box; 
    }
    
    .bottom > a {
      display: block;
      margin: 5px 0;
    }
    
    .bottom h1 {
      margin: 5px 0;
      white-space: nowrap;
    }
    <div class="title">
      <a href="index.html">
        <h1>AMIR TEYMURI</h1>
      </a>
    </div>
    
    <div class="content">
      <h2>List of compositions</h2>
      <p>Content...</p>
    </div>
    
    <div class="bottom">
      <a href="bio.html">
        <h1>BIOGRAPHY</h1>
      </a>
      <a href="misc.html">
        <h1>MISCELLANEOUS</h1>
      </a>
      <a href="contact.html">
        <h1>CONTACT</h1>
      </a>
    </div>
  • 使用 align-self: flex-end; text-align: right 不是 .title ,它是一个弹性子项(即 的直接子项 body ,它是一个弹性容器),因此响应该设置。

    html,
    body {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    body {
      display: flex;
      flex-direction: column;
    }
    
    .title {
      margin: 20px;
      margin-bottom: 50px;
      /* Adds additional space at the bottom */
      padding: 10px;
      border: 6px solid black;
      /* Add a rectangle (border) around the container */
      display: inline-block;
      /* Shrink to fit the content */
      width: fit-content;
      align-self: flex-end;
    }
    
    .title h1 {
      margin: 5px 0;
      /* Margin between each h1 element */
      white-space: nowrap;
      /* Prevent line breaks, keep h1 on one line */
    }
    
    .content {
      flex: 1;
      margin: 20px;
      text-align: left;
    }
    
    .bottom {
      margin: 20px;
      margin-bottom: 50px;
      /* Adds additional space at the bottom */
      padding: 10px;
      border: 6px solid black;
      /* Add a rectangle (border) around the container */
      display: inline-block;
      /* Shrink to fit the content */
      text-align: left;
      width: fit-content;
    }
    
    .bottom h1 {
      margin: 5px 0;
      /* Margin between each h1 element */
      white-space: nowrap;
      /* Prevent line breaks, keep h1 on one line */
    }
    <div class="title">
      <a href="index.html">
        <h1>AMIR TEYMURI</h1>
      </a>
    </div>
    
    <div class="content">
      <h2>List of compositions</h2>
      <p>Content...</p>
    </div>
    
    <div class="bottom">
      <a href="bio.html">
        <h1>BIOGRAPHY</h1>
      </a>
      <a href="misc.html">
        <h1>MISCELLANEOUS</h1>
      </a>
      <a href="contact.html">
        <h1>CONTACT</h1>
      </a>
    </div>
  • SsD 2月前 0 只看Ta
    引用 5

    使用 align-self: flex-end; text-align: right 不是 .title

返回
作者最近主题: