创建一个与容器一样宽的链接背景

Question

如何使链接的背景与其内部的容器一样宽？ 我目前的代码：

＆＃13;

＆＃13;

.menu {
	width: 500px;
	height: 100%;
	background-color: gray;
	left: 0;
	top: 0;
	position: fixed;
}

.menu_content {
	top: 50px;
	position: relative;
	width: 100%;
}

a.menuBtn, a.menuBtn:visited {
	background-color: blue;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 500px;
	text-decoration: none;
	color: white;
}

＆＃13;

<div class="menu">
		<div class="menu_content">
			<a href="#" class="menuBtn">Start</a>
			
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

我想要它，无论链接文本有多长，蓝色背景都与灰色背景一样宽。链接文本从左边开始是20px。

目前，由于填充，如果文本较长，蓝色背景会变宽。尝试填充右：100％，但显然不起作用。 值得一试

Answer 1

在def uniArtifact(projects: Project*): Seq[Setting[_]] = Seq( riffRaffArtifactResources := Def.taskDyn { val resources = projects.toSeq.map { project => val artifactFile = riffRaffPackageType in project artifactFile.zipWith(name in project){(file, name) => file.value -> s"$name/${file.value.getName}" } } Def.task(Def.Initialize.join(resources).value) }.value ) 上使用CSS的calc()函数和display属性，并删除额外的填充。

像：

.menuBtn

.menuBtn {
  display: block;
  width: calc(100% - 20px); /* Total Width (100%) - Padding (20px) */
}

.menu {
	width: 500px;
	height: 100%;
	background-color: gray;
	left: 0;
	top: 0;
	position: fixed;
}

.menu_content {
	top: 50px;
	position: relative;
	width: 100%;
}

a.menuBtn, a.menuBtn:visited {
	background-color: blue;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	/* padding-right: 500px; */
	text-decoration: none;
	color: white;
}

.menuBtn {
  display: block;
  width: calc(100% - 20px);
}

希望这有帮助！

Answer 2

a.menuBtn{ display: block; }

然后移除padding-right:500px

Answer 3

只需从width类中删除.menu属性：

.menu {
    height: 100%;
    background-color: gray;
    left: 0;
    top: 0;
    position: fixed;
}

现在，无论链接多长时间，.menu div都具有相同的宽度。

修改 或者，如果您希望div 至少 500px宽度，则为min-width: 500px;属性而不是width

Answer 4

use below css.

.menu {
            width: 500px;
            height: 100%;
            background-color: gray;
            left: 0;
            top: 0;
            position: fixed;
        }

        .menu_content {
            top: 50px;
            position: relative;
            width: 100%;
            padding: 20px 0;
            background-color: blue;
        }

        a.menuBtn, a.menuBtn:visited {
            text-decoration: none;
            color: white;
            padding: 0 15px;
            width: 100%;
        }

Answer 5

我添加了一个div作为CSS链接的包装：

.menuBtnWrapper {  
    padding: 20px;
    background-color: blue;
    width: 100%;
    box-sizing: border-box;
}

.menu {
	width: 500px;
	height: 100%;
	background-color: gray;
	left: 0;
	top: 0;
	position: fixed;
}

.menu_content {
	top: 50px;
	position: relative;
	width: 100%;
    background-color: red;
}

a.menuBtn, a.menuBtn:visited {
	text-decoration: none;
	color: white;
}

.menuBtnWrapper {  
	padding: 20px;
	background-color: blue;
    width: 100%;
    box-sizing: border-box;
}

<div class="menu">
		<div class="menu_content">
          <div class="menuBtnWrapper">  
			<a href="#" class="menuBtn">Start</a>
			</div>
		</div>
	</div>