在 HTML 中的链接前插入徽标答案

【问题标题】：Insert a logo before a link in HTML在 HTML 中的链接前插入徽标
【发布时间】：2018-06-10 19:39:47
【问题描述】：

我想在 a 标签前添加一张图片。

&lt;a href="index.html"&gt;Apple&lt;/a&gt;

例如，在 Apple 文本的同一行之前添加一个 Apple 标志。

谢谢安德鲁

【问题讨论】：

在此处发布问题之前，最好显示您尝试过的内容。
@Dvorog 是的，你说得对。但我的代码太错误了:)。下次！谢谢！

标签： html css image position

【解决方案1】：

使用display:flex; 到warp div 将a 和img 设置在同一行中

您可以将 align-items: center; 设置为居中文本

了解flex:https://www.w3schools.com/cssref/css3_pr_flex.asp

    .warp{
    display:flex;
    align-items: center;
    }
    img{
    height:150px;
    width:150px;
    }

<div class="warp">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>

    <a href="index.html">Apple</a>
</div>

【讨论】：

非常感谢！只是有一个小问题：使用 a 标签无法识别我的班级。
当然！我们开始吧。
颜色：#ffffff；字体大小：1rem；字体粗细：600；身高：继承；行高：继承；填充：0 1.25rem；文字装饰：无；
你是否将class设置为<a class="className">，然后在css中设置.className{..your style}???
以前是这样的苹果

【解决方案2】：

使用图像标签插入徽标。适当调整logo的宽高

试试这个：

<img src="url" width="30", height="30">  <a href="index.html">Apple</a>

在此处，为徽标提供适当的网址。

【讨论】：

我尝试了类似的方法，但链接向右移动了很多景观，也许是边距？

【解决方案3】：

如果你想动态插入图片，看这个例子：检查：

http://grpd.es/apple/apple.html

http://grpd.es/apple/tomato.html

代码示例：

<html>
<BODY>
<a href="index.html">Apple</a>
<a href="peach.html">Peach</a>
<a href="tomato.html">Tomato</a>
<button onclick="insertar()">imagen</button>
<script language="javascript">
function insertar(){
imagen=document.createElement('img');
imagen.src="apple.png";
imagen.id="img1";
document.body.appendChild(imagen);
var el = document.getElementsByTagName("a");
for(i=0;i<el.length;i++){
if(el[i].innerHTML=='Apple'){
var iimagen = document.body.insertBefore(imagen,el[i]);
}
}
}
</script>

</BODY>
</html>

【讨论】：

为了更高效的工作，您需要使用 id 创建元素示例：Apple 这可以帮助您使用 next 查找元素：var uno =document.getElementByID('uno') .... 你指的是带有 uno 示例的元素 uno.addeventlintener(click,....