Как сделать выравнивание по правому краю внутреннего элемента внутри предварительного тега - PullRequest
Новая
       18

Как сделать выравнивание по правому краю внутреннего элемента внутри предварительного тега

0 голосов
/ 02 мая 2020

У меня есть проблема, которая должна быть решена только через CSS / Query - HTML изменение невозможно, потому что HTML реализовано на тысячах страниц на сайте.

снимок экрана (1)

enter image description here

Хорошо работает, если ширина меньше, но когда полоса прокрутки видна, и я перемещаю ее вправо, чтобы увидеть код, затем " Кнопка «Копировать» также смещена влево,

creenshot (2)

enter image description here

Я добавил кнопку копирования, используя скрипт, и она отлично работает с тысячами страниц. Невозможно решить проблему.

HTML: 

<code><pre class="i3-code">
--example code--

SCRIPT: 

 <script type="text/javascript">
    function cpy(t){var e=t.innerText,n=document.createElement("textarea");n.setAttribute("class","invisible"),n.setAttribute("id","cpytxtbox"),n.textContent=e,document.body.append(n),n.select(),document.execCommand("copy"),document.getElementById("cpytxtbox").outerHTML=""}var $input=$('<div class="copy-btn"><input type="button" value="Copy"/></div>');$input.prependTo($(".i3-code")),$(".copy-btn").click(function(){cpy(this.parentElement)});
  </script>

CSS: 

.i3-code {
    background-color: #fefbed;
    font-size: 1em;
    line-height: 1.2;
}
.copy-btn {
    text-align: right;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -8px;
    margin-bottom: 5px;
    background-color: #f4f4f4;
}
.copy-btn input {
    background: #e1e1e1;
    color: #000;
    border: none;
    font-weight: 500;
    padding: 7px;
    transition: background 1s;
}

С этим URL можно выполнить живой тест (для любого примера кода), изменив размер окна 

https://www.includehelp.com/python/date-toordinal-method-with-example.aspx

1 Ответ

1 голос
/ 02 мая 2020

Это должно сработать: 

.copy-btn {
    text-align: right;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -8px;
    margin-bottom: 5px;
    background-color: #f4f4f4;
    position: sticky;
    top: -8px;
    left: -8px;
    right: -8px;
    overflow: hidden;
}

Он реализует Положение: липкое .

...