8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 右对齐 h1 元素，使其右侧不起作用

右对齐 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） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    \'我无法让标题 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>
  • 引用 3楼

    有很多方法可以做到这一点，其中一种方法是将添加 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>
  • 引用 4楼

    使用 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

返回
作者最近主题：