HTML & CSS: отображать два блока рядом с 2 кнопкой - PullRequest
Новая
       1

HTML & CSS: отображать два блока рядом с 2 кнопкой

0 голосов
/ 25 июня 2018

Я пытаюсь выполнить простое упражнение, чтобы улучшить свои навыки веб-разработки. Я делаю простой переводчик. Конечно, для внешнего интерфейса я использую HTML и CSS. Для бэкэнда я использую сервлет Java.

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

Я достиг хитрого пути (я полагаю?), Чего я хочу. Но я думаю, что есть лучший способ сделать это. Вот скрипка. Кто-то может дать мне подсказку или любое объяснение, как это сделать или как работает выравнивание элементов? Спасибо! Код здесь:

index.html

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <title>Translator</title>
 </head>
 <body>
  <h1>Welcome to translator!</h1>

  <div class="div1">
    <form id="form1">
        <textarea class="inline-textarea" id="text1" form="form1"></textarea>
        <input type="submit" value="Translate" id="translate">
        <input type="submit" value="Swap" id="swap">
    </form>
</div>

<div class="div2">
    <form id="form2">
        <textarea class="inline-textarea" id="text2" form="form2"></textarea>
    </form>
</div>


<script type="text/javascript" src="js/jsScript.js"></script>
  </body>
 </html>

style.css

body {
 font-family: 'Open Sans', sans-serif;
}
.div1 {
 float: left;
 margin-right: 2px;
}

#translate {
 display: block;
}

#swap {
 float: right;
 position: relative;
 margin-top: -21.2px;
 margin-right: 35px;    
}

Вот скрипка: https://jsfiddle.net/8e6s1d25/

1 Ответ

0 голосов
/ 25 июня 2018

Во-первых, я не уверен, что вам нужны две формы. Вы просто лучше с одной единственной формой. И я собираюсь использовать два столбца внутри <form>, чтобы вход слева и вывод справа, как вы видите в Google Translate.

Следующим шагом является то, что я не уверен, почему вам нужно было дать кнопке Translate , display: block, которая вызывает у вас проблему. Объединяя все вышесказанное, я сделал простой фрагмент ниже, который выглядит как предварительный просмотр ниже: 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans', sans-serif;
}
textarea {
  width: 100%;
  height: 5em;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0;
}
.input, .output {
  float: left;
  width: 50%;
  padding: 5px;
}
<h1>Welcome to translator!</h1>
<form action="">
  <div class="input">
    <textarea name="input" id="input"></textarea>
    <input type="button" value="Translate" />
    <input type="button" value="Swap" />
  </div>
  <div class="output">
    <textarea name="output" id="output"></textarea>
  </div>
</form>

Preview

preview

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...