拥有背景而不移动信件的位置

时间:2015-08-14 13:44:22

标签: html css

我想在" a"添加按钮背景。没有移动它的位置。

表B几乎是正确的,除了你移动" a"右边。

我不知道该怎么做。

您还需要考虑到我还需要在将来更改宽度的大小。

谢谢!



    #testtesttesttest {
        width: 50px;
        background-color: #F1F2F2;
        -webkit-border-radius: 20px;
        border-width: 1px;
        border-color: #47a417;
        text-decoration: none;
        text-align: center;
        padding: 1px 8px;
        display: inline-block;
        line-height: 21px;
        color: white;
        font-family: Helvetica,Arial,sans-serif;
    }

    #testtesttesttest:hover {
        background-color: #3D8E14;
    }
	
	ul.aa, ul.bb
	{
		list-style-type: none;
	}

	Table A:

	<ul class="aa">
		<li>
			<a href="#">
				a
			</a>
		</li>
		<li>
			<a href="#">
				b
			</a>
		</li>
		<li>
			<a href="#">
				c
			</a>
		</li>
		<li>
			<a href="#">
				d
			</a>
		</li>
		<li>
			<a href="#">
				e
			</a>
		</li>
	</ul>

	<br/>
	<br/>

	Table B:
		
	<ul class="bb">
		<li>
			<a href="#">
				<span id="testtesttesttest">a</span>
			</a>
		</li>
		<li>
			<a href="#">
				b
			</a>
		</li>
		<li>
			<a href="#">
				c
			</a>
		</li>
		<li>
			<a href="#">
				d
			</a>
		</li>
		<li>
			<a href="#">
				e
			</a>
		</li>
	</ul>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

尝试给出负左边距

    #testtesttesttest {
        width: 50px;
        background-color: #F1F2F2;
        -webkit-border-radius: 20px;
        border-width: 1px;
        border-color: #47a417;
        text-decoration: none;
        text-align: center;
        padding: 1px 8px;
        display: inline-block;
        line-height: 21px;
        color: white;
        font-family: Helvetica,Arial,sans-serif;
        margin-left:-30px;
    }

    #testtesttesttest:hover {
        background-color: #3D8E14;
    }
	
	ul.aa, ul.bb
	{
		list-style-type: none;
	}
	Table A:

	<ul class="aa">
		<li>
			<a href="#">
				a
			</a>
		</li>
		<li>
			<a href="#">
				b
			</a>
		</li>
		<li>
			<a href="#">
				c
			</a>
		</li>
		<li>
			<a href="#">
				d
			</a>
		</li>
		<li>
			<a href="#">
				e
			</a>
		</li>
	</ul>

	<br/>
	<br/>

	Table B:
		
	<ul class="bb">
		<li>
			<a href="#">
				<span id="testtesttesttest">a</span>
			</a>
		</li>
		<li>
			<a href="#">
				b
			</a>
		</li>
		<li>
			<a href="#">
				c
			</a>
		</li>
		<li>
			<a href="#">
				d
			</a>
		</li>
		<li>
			<a href="#">
				e
			</a>
		</li>
	</ul>

答案 1 :(得分:0)

将范围设置为内联块无效,因此将其更改为内联。然后删除8px填充,你就完成了。

答案 2 :(得分:0)

如果你想让文本保持在同一个地方但是让它在背景中居中,你可以用CSS变换(等于width / 2 - 水平填充/ 2)将其移回:

#testtesttesttest {
    transform: translateX(calc(-50% + 4px));
}

这里有JSFiddle来显示效果。尝试更改宽度,您会看到文本仍保留在同一位置。希望这可以帮助!如果您有任何问题,请告诉我。