Поддерживайте выравнивание кнопок в HTML

Каждый раз, когда я нажимаю Button 1 , Button 2 и Button 3 идут ниже Button 1 (то же самое с Button 2 ). Вот рабочий фрагмент

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

Я хочу, чтобы подобное произошло

Что мне нужно изменить, чтобы добиться того, чего я хочу? Спасибо за ваше время!

Всего 4 ответа


Структура, которую вы используете html. введите описание изображения здесь

Поместите текст внутри элемента контейнера для каждой кнопки.

Установите отображение элементов контейнера в строковый блок


Вам нужно установить div, которые содержат текст для отображения: inline-block;

div {
  display: inline-block
}

Вот обновленный фрагмент кода. Я изменил html и взял текст div в конце после добавления кнопок. Таким образом, кнопки остаются в одном положении. Для замены текста я использовал переменную, которая изменяется при нажатии кнопки, и значение обновляется на html.

Надеюсь, это то, чего вы хотели достичь.


Вот код для вас:

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } 
 body { font-family: Arial; } .tab { overflow: hidden; } .tab button { cursor: pointer; padding: 6px 10px; transition: 0.3s; font-size: 17px; } .tabcontent { display: none; padding: 6px 12px; border-top: none; } 
 <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> 


Есть идеи?

10000