Как я могу переместить мою кнопку вправо от моей веб-страницы?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Вот мой HTML

 <body>
   <h1>Javascript Read More Test</h1>
   <h3>Projects</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   <span id="restOfArticle" style="display:none">
   <ul>
       <li>Some more text</li>
       <li>Some more text</li>
       <li>Some more text</li>
   </ul>
   </span>
   <a onclick="showMoreOrLess(this,'restOfArticle');"> </a>

Вот мой Javascript

 function showMoreOrLess(thisObj,bonusContent){
    var caption = thisObj.innerHTML;
    //alert(caption);
    if ( caption == " " ) {
        document.getElementById(bonusContent).style.display = "inline";
        thisObj.innerHTML = "-";
    } else {
        document.getElementById(bonusContent).style.display = "none";
        thisObj.innerHTML = " ";
    }
}

И вот мой CSS

 body
{
    text-align: left;

}

h3
{
    text-align: left;
}

p1
{
    text-align: right;

}

 
{
    text-align: right;
}

Я хочу, чтобы моя кнопка была выровнена справа от страницы, но каждый раз, когда я пытаюсь отредактировать знак , скрытый текст внутри знака перемещается вправо. Есть ли способ переместить только знак ?

Я также новичок в этом сайте и кодировании в целом. Заранее приношу извинения за любые ошибки.

1. Пожалуйста, создайте jsfiddle с рабочим кодом

2. Начните с раскомментирования кода?

3. Вы захотите указать свой <a> тег и идентификатор и использовать их в своем CSS. Либо float: right , либо используйте абсолютное позиционирование.

4. { text-align: right; } Это не делает то, что вы думаете.

5. Должно быть: .restOfArticle { float: right }

Ответ №1:

Вы не можете настроить таргетинг на ‘ ‘ с помощью CSS, вместо этого вы должны настроить таргетинг на окружающую ‘a’.

 a{
  float: right;
}

Ответ №2:

Вам просто нужно добавить { float:right } стиль к вашей кнопке.

Я сохранил ваш код и создал рабочий JSFiddle здесь.

Убедитесь, что вы нацелены на элемент с использованием css, т. е. <a> , а не на содержимое элемента ( ' ' ).

Примечание: В качестве рекомендации вы можете использовать <button> тег вместо привязки ( <a> ), поскольку вам, похоже, нужна кнопка, а не просто плавающий текст.

1. Как бы мне изменить ее на кнопку? Что-то вроде этого — <a class=»button» href=»#»> onclick=»showMoreOrLess(this,’restOfArticle’);»> </a>

2. Просто измените тег привязки <a> на использование тега button <button> . Вы также можете избавиться от href атрибута. Итак, для вашего примера вы можете использовать: <button class="button" onclick="showMoreOrLess(this, 'restOfArticle');"> </button>

Ответ №3:

В вашем CSS у вас есть селектор с именем » «? Используйте .AClassName (с точкой) и установите class=»AClassName» в вашем HTML-элементе. Использование a, подобного тому, что предлагает adamjld, работает, но также влияет на все другие ссылки на этой странице.

функция text-align выравнивает ваш текст только в пределах окружающего поля, поэтому вам нужно сделать так, чтобы окружающее «поле» (например, div) имело ширину всей страницы, или расположить элемент справа (со стилями position и right), или использовать float, как предлагают rageandqq и adamjld. Возможно, вам также следует взглянуть на clear: оба