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

I want to place a little image next to usernames on my website which visitors can click. The image is an icon (16x16 pixels CANNOT CHANGE!) and it needs to be displayed a little lower than the text. I don't know how many characters the username will be, but the entire text+image should not be wrapped over multiple lines...

我想在我的网站上的用户名旁边放一个小图片,访问者可以点击。图像是一个图标(16x16像素无法更改!),它需要显示略低于文本。我不知道用户名会有多少个字符,但是整个文本+图片不应该被多行包裹...

How can this be achieved?

怎么能实现这一目标?

Example (doesn't work for my requirements obviously...):

示例(显然不适合我的要求......):

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

7 个解决方案

#1

You can control the vertical alignment of the image my using a negative margin-bottom. I also don't think you need the inner span elements, always remember less markup is better. However, I'm not sure you can prevent wrapping without placing the div in a container wide enough to cater for it.

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

#2

OPTION #1 ( not perfect - but no programming ):

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

#3

This is a solution, but the username is clickable :

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

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

#4

there are several anwsers: 1) give your both spans display:block; and the one with text has to have line-height 2) float:left for image and line-height

有几个anwsers:1)给你的两个跨度显示:块;并且具有文本的那个必须具有行高度2)float:left用于图像和行高

#5

This solution works on IE7, Firefox, Safari, Chrome and Opera :

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

#6

OPTION #2 (Stops wrapping if name is long): This function cuts the name off and adds a triple "..." to the end of the name if it is longer than 32 characters.

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

#7

OPTION #3: (Stops wrapping if name is too long and does not shorten name):

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

NOTE #1: Need to put the "&" and "nbsp" together in the function above (it would not display the text on this site if I put them together).

注意#1:需要将“&”和“nbsp”放在上面的函数中(如果我将它们放在一起,它将不显示该站点上的文本)。

NOTE #2: I made the image an inline style since you said you want a different one for each user.

注意#2:我说图像是内联样式,因为你说你想为每个用户想要一个不同的图像。

NOTE #3: I recommend you add a width of whatever the max you would want your text area to be into the userlinkDiv section of the style.

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

#1

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

#2