Question

我正在尝试一些简单的练习来提高我的Web开发技能。我正在做一个简单的翻译器。当然，对于前端，我正在使用HTML和CSS。对于后端，我正在使用Java Servlet。

我想在彼此相邻的地方显示两个文本区域，并在左侧的文本区域下方显示两个按钮以翻译和交换语言（类似于Google翻译，但在第一个文本区域的左侧具有两个按钮）。 / p>

我以一种棘手的方式实现了（我想？）我想要的。但是我认为有一种更好的方法。这是小提琴。有人可以给我一个提示，或对它进行任何解释或如何对align元素进行解释？谢谢！代码在这里：

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/

Answer 1

第一件事，我不确定您是否需要两种形式。使用一种表格您会更好。我将在<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>

预览

希望这会有所帮助。随时提出任何问题，以使自己清楚地了解编码标准。我使用的是在现场制作站点中使用的那种。 :)

HTML和CSS：使用2个按钮并排显示两个块

1 个答案: