代码之家 › 专栏 › 技术社区 › Marcus Grass

CSS将图像尺寸设置为父DIV的百分比,而不设置父DIV的尺寸

image css html javascript

Marcus Grass · 技术社区 · 7 年前

另外,由于某些原因,引入了垂直填充。

这是它的样子:

文本对齐:居中; } 职位:相对; 边距:0; .链接框img{ <DIV class=“LinkBox”> <img src=“/static/images/internalnavbardiv/bluefilterline.svg”> <A routerlink=“/register invoice”>登记发票</A> </DIV>>=



但是,我找不到一个好的方法来设置图像的宽度,因为父DIV没有设置的宽度,父DIV的宽度应该取决于a-link文本的长度。







而且,如何根据包含链接的文本长度使框的高度与宽度相同?











.navMain {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

.linkBox {
  display: inline-block;
  padding-right: 20px;
}

.linkBox a {
  position: relative;
  text-decoration: none;
  color: black;
  padding: 0;
  margin: 0;
}

.linkBox img {
  position: relative;
  padding: 0;
  margin: 0;
}
<div class="navMain">
  <div class="linkBox">
    <a routerLink="/ordering"> Place order</a>
  </div>
  <div class="linkBox">
    <a routerLink="/invoices"> Invoice overview</a>
    <img src="/static/images/internalnavbardiv/blueFilterLine.svg">
  </div>
  <div class="linkBox">
    <a routerLink="/registerinvoice"> Register invoice</a>
  </div>
</div>

1 回复 | 直到 7 年前

Temani Afif 7 年前

只需使用渐变来实现这一点,而不需要img或svg:

.navMain {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

.linkBox {
  display: inline-block;
  padding-right: 20px;
}

.linkBox a {
  position: relative;
  text-decoration: none;
  color: black;
  padding-bottom: 5px;
  margin: 0;
}
.decorate {
  background:linear-gradient(blue,blue) bottom/100% 1px no-repeat;
}

<div class="navMain">
  <div class="linkBox">
    <a routerLink="/ordering"> Place order</a>
  </div>
  <div class="linkBox">
    <a routerLink="/invoices" class="decorate"> Invoice overview</a>
  </div>
  <div class="linkBox">
    <a routerLink="/registerinvoice" class="decorate"> Register </a>
  </div>
</div>

.navMain {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

.linkBox {
  display: inline-block;
  padding-right: 20px;
}

.linkBox a {
  position: relative;
  text-decoration: none;
  color: black;
  padding-bottom: 5px;
  margin: 0;
}
.decorate {
  background:url(https://picsum.photos/200/100?image=1040) bottom/80% 2px no-repeat;
}

<DIV class=“navmain”>
<A routerlink=“/ordering”>下订单</A>
</DIV>
</DIV>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前