Question

我想在＆＃34; a＆＃34;添加按钮背景。没有移动它的位置。

表B几乎是正确的，除了你移动＆＃34; a＆＃34;右边。

我不知道该怎么做。

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

谢谢！

＆＃13;

    #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;
	}

＆＃13;

	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;

Answer 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>

Answer 2

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

Answer 3

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

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

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

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

3 个答案: