放置文字和图像彼此相邻没有包装和控制图像的垂直位置..？

我想在我的网站上的用户名旁放置一个小图片，用户可以点击它。图像是一个图标（16x16像素无法更改！），并且需要显示比文本稍低的图像。我不知道用户名会有多少个字符，但是整个文本+图像不应该被多行覆盖......放置文字和图像彼此相邻没有包装和控制图像的垂直位置..？

这怎么能实现？

例（不适合我的要求工作显然...）：

<style type="text/css"> 
    div.userlink {height:20px;whitespace:no-wrap;} 
</style> 

<div class="userlink"> 
    <span class="text">The_username_of_unknown_length</span> 
    <span class="image"><a href="#"><img src="/theicon.jpg" /></a></span> 
</div>

来源

2009-06-16 Ropstah

Theres没有必要指定浮动属性跨度在您的设计 – rahul 2009-06-16 12:55:37

好赶上，但问题仍然存在:) – Ropstah 2009-06-16 12:59:17

当用户名太长时会发生什么？ – rahul 2009-06-16 13:01:00

您可以控制图像的垂直对齐我使用负边距。我也不认为你需要内部跨度元素，总是记得少的标记更好。但是，我不确定如果不将div放在足够宽的容器中以满足它，可以防止包装。

<style type="text/css"> 
    div.userlink {position:relative;height:20px;whitespace:no-wrap;} 
    div.userlink a {margin-bottom: -2px;} 
</style> 

<div class="userlink"> 
    The_username_of_unknown_length 
    <a href="#"><img src="/theicon.jpg" /></a> 
</div>

来源

2009-06-16 13:01:42 roryf

这是一个解决方案，但用户名是可点击：

<html> 
<head> 
<style> 
a.userlink { 
    background: url('/theicon.jpg') no-repeat left bottom; 
    padding-left: 20px; 
    display: block; 
    height: 20px; 
    line-height: 20px; 
    overflow: hidden; 
} 
</style> 
</head> 
<body> 
<a class="userlink" href="#">The_username_of_unknown_length</a> 
</body> 
</html>

来源

2009-06-16 13:05:52 Alsciende

有几个anwsers： 1）给你的两跨越显示：块;和一个用文字必须有行高 2）浮动：左图像和行高

来源

2009-06-16 13:10:29 red777

该解决方案适用于IE7，火狐，Safari，Chrome和Opera：

<style type="text/css"> 

div.userlink { 
    overflow:hidden; 
    position: relative; 
    height: 25px; 
    line-height: 25px; 
} 
span.image { 
    position: absolute; 
    left: 0px; 
    top: 5px; 
} 
span.text { 
    margin-left: 25px; 
} 

</style> 

<div class="userlink"> 
    <span class="text">The_username_of_unknown_length</span> 
    <span class="image"><a href="#"><img src="/theicon.jpg" /></a></span> 
</div>

来源

2009-06-16 13:11:51 Alsciende

OPTION ＃1（不完美的 - 但没有编程）：

<div id="userlink"> 
    <div class="text">The_username_of_unknown_length</div> 
    <a href="#"><img class="userimg" src="image.gif"/></a> 
</div> 



#userlink { 
    height: 20px; 
    whitespace:no-wrap; 
    overflow: hidden; 
} 

.text { 
    float: left; 
} 

.userimg { 
    float: left; 
    margin-top: 3px; 
    margin-left: 3px; 
}

来源

2009-06-16 13:13:45

OPTION＃2（停止包装，如果名称是长）： 此功能切名关闭如果长度超过32个字符，则会在名称的末尾添加三个“...”。

#userlink { 
    height: 20px; 
    whitespace:no-wrap; 
    overflow: hidden; 
} 

.text { 
    float: left; 
} 

.userimg { 
    float: left; 
    margin-top: 3px; 
    margin-left: 3px; 
} 

    <?php 
    function format_name($name) { 
     $maxNameLength = 32; 
      if (strlen($name) > $maxNameLength) { 
      $name = substr($name, 0, $maxNameLength - 3)."..."; 
     } 
     return $name; 
    } 

    $name = "The username of unknown length"; 
    $name = format_name($name); 
    ?> 
    <div id="userlink"> 
     <div class="text"><?php echo $name; ?></div><a href="#"> 
     <img class="userimg" src="image.gif" /></a> 
    </div>

来源

2009-06-16 14:45:37

选项＃3：（停止包装，如果名字太长，不缩短名称）：

#userlinkDiv { 
    height: 20px; 
    display: table; 
} 

.userlink { 
    display: block; 
    padding-right: 24px; 
    text-decoration: none; 
    color: black; 
} 


    <?php 
     function noBreakName($name) { 
      $name = str_ireplace(" ", '& nbsp;', $name); 
      return $name; 
     } 
     $name = "The username of unknown length"; 
     $name = noBreakName($name); 
    ?> 
    <div id="userlinkDiv" style="background: url('image.gif') no-repeat right bottom;"> 
     <a class="userlink" href="#"><?php echo $name; ?></a> 
    </div>

注1：需要把 “&” 和 “NBSP”一起在上面的功能（如果我把它们放在一起，它不会显示在这个网站上的文字）。

注意＃2：我将图像设为内联样式，因为您表示您需要为每个用户使用不同的图像。

注意＃3：我建议你添加任何最大值的宽度，你希望你的文本区域进入到样式的userlinkDiv部分。

来源

2009-06-16 14:46:27

放置文字和图像彼此相邻没有包装和控制图像的垂直位置..？

回答

相关问题