锚是横跨所有页面，而不仅仅是文本

我目前正试图让我的主页看起来更好，并更容易在慢速上网下载。锚是横跨所有页面，而不仅仅是文本

以前我用图像作为文本，这使得加载缓慢。现在我试图使用真实的文字。问题在于锚点横跨页面的整个宽度，而不仅仅是文本。

页面链接： http://www.hoppvader.nu/index2.php

我怎样才能让链接“停”在文本的结束，但仍然使两行显示的文本溢出：块;呢？目前的设置可以在小型设备上正常工作，但问题在于锚点扩展得太远。

CSS

@font-face { 
    font-family: "Klubb"; 
    src: url(Manifest/sys/MonotypeCorsiva.ttf) format("truetype"); 
} 
span.Klubb { /* Text link */ 
     font-family: 'Klubb', Verdana, Tahoma; 
     font-size: 3.5vw; 
     font-weight: 900; 
     text-shadow: 0.5px 0.5px #FF0000; 
     color: black; 
     display: block; 
     padding-left: 150px; 
     margin-left: 40px; 
     margin-top:0px; 
     padding-bottom:20px; 
    } 
span.pLogga { /* Image on the left of text */ 
     float: left; 
     width: 160px; 
     text-align: center; 
     }

样本HTML：

<span><a Style='text-decoration:none' href=UFK-Skelleftea.php><span class='pLogga'><img src=../Manifest/sys/Logga/UFK.gif alt='Umeå Skellefteå' height=50/></span><span class='Klubb'>Umeå fallskärmsklubb (Skellefteå)</span></a></span><br> 
<span><a Style='text-decoration:none' href=UFK-Umea.php><span class='pLogga'><img src=../Manifest/sys/Logga/UFK.gif alt='Umeå fallskärmsklubb Umeå' height=50/></span><span class='Klubb'>Umeå fallskärmsklubb (Umeå)</span></a></span><br>

来源

2016-03-25 Andreas

因为所有的元素都是块级别，无论你在哪里使用'display：block;'使它成为'display：inline-block;' –

我现在就试过了。只要窗口全屏显示，它就可以工作，但如果我调整窗口的大小，它会变得疯狂。 – Andreas

你的标记是混乱的。你需要把它弄干净。利用浮游物。 –

我建议做外跨度显示：块，明确：左。将float：添加到.klubb范围，然后减少填充/边距。

来源

2016-03-25 11:48:09 claicham

什么是明确的左？我想代码就像你现在说的，除了明显的左边。 – Andreas

clear是一个css属性，它将确保您的浮动堆栈，而不是在整个页面上水平显示，“清除彼此”。您可以清除左侧或右侧的项目。使用浮动物品时非常有用。 – claicham

啊......所以这就是为什么它将自己放在全屏模式下彼此相邻？：-）谢谢！ :-) – Andreas

锚是横跨所有页面，而不仅仅是文本

回答

相关问题