Поместите текст и изображение рядом друг с другом без переноса и управляйте вертикальным положением изображения ..?

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

Вы можете контролировать вертикальное выравнивание изображения, используя отрицательное поле-дно. Я также не думаю, что вам нужны внутренние элементы span, всегда помните, что чем меньше разметка, тем лучше. Тем не менее, я не уверен, что вы можете предотвратить перенос, не помещая 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

ВАРИАНТ № 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 стиля.

Answer 4

ОПЦИЯ № 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 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

есть несколько anwsers: 1) отобразить оба пролета: блок; а тот, у которого есть текст, должен иметь высоту строки 2) float: слева для изображения и высоты строки

Answer 7

Это решение, но имя пользователя кликабельно:

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