Question

我想在我的网站上的用户名旁边放一个小图片，访问者可以点击。图像是一个图标（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>

Answer 1

您可以使用负边距底部控制图像的垂直对齐方式。我也不认为你需要内部元素，总是记住更少的标记更好。但是，我不确定你是否可以防止包装，而不将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>

Answer 2

选项＃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;
}

Answer 3

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

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

Answer 4

有几个anwsers： 1）给你的两个跨度显示：块;而带文字的那个必须有行高 2）float：左边是图像和行高

Answer 5

此解决方案适用于IE7，Firefox，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>

Answer 6

选项＃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>

Answer 7

选项＃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：需要放“＆amp;”和“nbsp”在上面的函数中一起使用（如果我把它们放在一起，它就不会显示在这个网站上的文字）。

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

注意＃3：我建议你将文本区域的最大宽度添加到样式的userlinkDiv部分。

将文本和图像彼此相邻放置而不包裹并控制图像的垂直位置。

7 个答案: