Goog" />

Поместите ссылку через правую границу

html css html5 nav

35 просмотра

3 ответа

Следующий скрипт сгенерирует отображение вроде этого:

<style>
    nav { position: fixed; left: 10em; top: 5em; border-right: 100px solid #0000cc; box-shadow: 4px 0 5px rgba(0,0,0,0.8);}
</style>
<body>
    <nav><a href="http://www.google.com/">Google</a>
        <ul>
            <li>White</li>
            <li>Blue</li>
            <li>Yellow</li>
            <li>Black</li>
            <li>Green</li>
            <li>Orange</li>
            <li>Pink</li>
            <li>Red</li>
            <li>Magenta</li>
        </ul>
    </nav>
</body>

введите описание изображения здесь

Мне бы хотелось, чтобы ссылка google.com находилась на правой границе, как показано ниже: введите описание изображения здесь

как исправить эти сценарии? Спасибо вам за помощь.

Автор: priyo Источник Размещён: 08.11.2019 11:22

Ответы (3)


0 плюса

Решение

Выход

Вот рабочая скрипка для вашей проблемы .

Я просто добавил к вашей ссылке идентификатор, который называется «плавающая ссылка», изменил цвет ссылки на белый (#fff) и разместил его абсолютно. Измените свойства top и / или left, чтобы отрегулировать положение.

Код, который достигает этого:

#floatingLink {
  color:#fff;
  position : absolute;
  left: 7.5em; 
  top: 1em;
  z-index: 1;
}
Автор: Somenath Sinha Размещён: 20.08.2016 01:58

0 плюса

сначала заблокируйте метку, а затем вам нужно создать ее с абсолютной позицией, затем вы можете разместить ее в любом месте внутри элемента его родительского элемента. Наконец, вы можете поместить ее в любом месте, где хотите, вот демо, которое я сделал, я думаю, можем удовлетворить ваш запрос:

a {
    display: block;
    padding-left: 100px;
    position: absolute;
    color: red;
    padding-top:15px;
}
Автор: Crabime Размещён: 20.08.2016 02:16

0 плюса

<html>
    <style>
    nav {
        position: fixed;
        left: 10em;
        top: 5em;
        border-right: 100px solid #0000cc;
        box-shadow: 4px 0 5px rgba(0,0,0,0.8);
    }
    a {
        color: white;
        position: relative;
        top: 4.5em;
        right: 19em;
    }
    </style>
    <body>
        <nav>
            <ul>
                <li>White</li>
                <li>Blue</li>
                <li>Yellow</li>
                <li>Black</li>
                <li>Green</li>
                <li>Orange</li>
                <li>Pink</li>
                <li>Red</li>
                <li>Magenta</li>
            </ul>
        </nav>
        <a href="http://www.google.com/" style="float:right;">Google</a>
    </body>
</html>

Попробуй это....

Автор: Jegadesh B S Размещён: 20.08.2016 03:26
Вопросы из категории :
32x32