" TACO"比“Taco”宽。我该如何解决这个问题？ [英] "Táco" is wider than "Taco". How can I fix that?

问题描述

我试图在不带div的顶部加载一个带有变音符号的div。间距不像我这样工作。 （请参阅下面的代码片段。）我该如何解决这个问题？

  div.text {width：75％;位置：相对; } div.diacritics {width：100％;身高：100％;位置：绝对; top：0;左：0; z-index：-1;红色; }  

< div class =text> String String String String String String String String String< div class =diacritics> StrüngStríngStríngStríngStríngStríngStríngStríngStríngStríng< / div> < / div>< div class =text> Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco< div class =diacritics> TácoTácoTácoTácoTácoTácoTácoTácoTácoTáco< / div> < / div>

解决方案

<

  div.text {width：75％;位置：相对; font-family：monospace; } div.diacritics {width：100％;身高：100％;位置：绝对; top：0;左：0; font-family：monospace; z-index：-1;红色; }  

< div class =text> String String String String String String String String String< div class =diacritics> StrüngStríngStríngStríngStríngStríngStríngStríngStríngStríng< / div> < / DIV> < div class =text> Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco< div class =diacritics> TácoTácoTácoTácoTácoTácoTácoTácoTácoTáco< / div> < / div>

p如果您可以交易-off，你总是可以尝试使用等宽字体系列。

I'm trying to load a div with diacritics on top of a div without. The spacing isn't working out like I though. (See the snippet below.) How can I fix this?

div.text {
	    width: 75%;
	    position: relative;
	}
	div.diacritics {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
      z-index: -1;
      color: red;
	}

<div class="text">String String String String String String String String String String
	<div class="diacritics">
  Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
  </div>

<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
	<div class="diacritics">
  Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
  </div>

解决方案

div.text {
    	    width: 75%;
    	    position: relative;
            font-family: monospace;
    	}
div.diacritics {
    	    width: 100%;
    	    height: 100%;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
            font-family: monospace;
          z-index: -1;
          color: red;
    	}    	

    <div class="text">String String String String String String String String String String
    	<div class="diacritics">
      Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
      </div>

    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
    	<div class="diacritics">
      Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
      </div>

If you are able to make the trade-off, you could always try using a monospace font family.

这篇关于" TACO"比“Taco”宽。我该如何解决这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！