Question

我想重新创建 this，您可以在其中获得基本表单，但名字和姓氏的输入必须在同一行。我一直在尝试浮动而不成功，而且我在标签方面也遇到了问题（需要放在首位）。将div放在表格中还可以吗？我想可能由于输入宽度为100％而遇到问题，但是我看不到任何其他方式。

.parent {
    display: grid;
    position: relative;
    font-family: 'Open Sans', sans-serif;

}
.lefthalf {
    grid-column: 1;
}
.righthalf {
    grid-column: 2;
    margin: 40px;
}

#submit {
    background-color: #000000;
    border-radius: 4px;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 15%;
}


h1 {
    font-size: 75px;
    font-weight: 700;
}

h2 {
    font-size: 24px;
}

p {
    font-size: 16px;
    line-height: 1.7;
    color: rgb(74, 76, 83);
}




.form input {
    width: 100%;
    border: 1px solid #000000;
    border-radius: 4px;
    font-size: 16px;
    padding: 8px;
    display: table-cell
}

.form input, label {
    display: block;
}

.firstandlast input, {
    width: 200px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="parent">  
        <div class="lefthalf">
            <img src="assets/books.jpg" style="max-width: 700px">
        </div>
        <div class="righthalf">
            <h1>It's going down for real.</h1>
            <p> Lorem ipsum dolor sit amet consectetur adipiscing elit.Excepturi eveniet magni ab eos consectetur sunt, eius consequatur vitae dignissimos reiciedis repellat, cupiditate qui necessitatibus voluptatibus minus dolorum modi te? Nihil!</p>
            <h2>About You</h2>
            <!--form goes here-->
                <form class="form">
                    <div class="firstandlast">
                        <label for="firstname">First Name</label>
                        <input type="text" id="firstname" size="30" placeholder="Jane">
                        <label for="lastname">Last Name</label>
                        <input type="text" id="lastname" value="Doe">
                    </div>
                    <div style="clear:both;">&nbsp;</div>                    <label for="typeofbookchoice">Type of book choice</label>
                    <input type="text" name="typeofbookchoice" value="hardcover">
                    <label for="phonenumber">Phone number</label>
                    <input type="text" name="phonenumber" value="555-555-5555">
                    
                    <input type="submit" value="Send" id="submit" name="submit">

                </form>
        </div>
    </div>
</body>

</html>

Answer 1

这怎么样？

（请注意，我将代码缩短了一点，只包括了名字和姓氏的输入。）

#submit {
  background-color: #000000;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 15%;
}

.form input {
  width: 600px;
  border: 1px solid #000000;
  border-radius: 4px;
  font-size: 16px;
  padding: 8px;
  display: table-cell
}

.firstandlast input,
label {
  width: 200px;
}

.floating-input {
  float: left;
  margin-right: 20px;
}

<form class="form">
  <div class="firstandlast">
    <div class="floating-input">
      <label for="firstname">First Name</label>
      <br><input type="text" id="firstname" size="30" placeholder="Jane">
    </div>
    <div class="floating-input">
      <label for="lastname">Last Name</label>
      <br><input type="text" id="lastname" value="Doe">
    </div>
  </div>
</form>

Answer 2

您可以在此处使用的另一种方法是利用display: flex使这些项目彼此相邻。这是一个示例：

* {
  box-sizing: border-box;
}

body {
  background: #000;
}

label {
  display: block;
}

.form {
  background: #fff;
  margin: 0 auto;
  padding: 10px;
  width: 90%;
}

form div {
  width: 45%;
}

.form input {
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px;
  width: 100%;
}

.firstandlast {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<form class="form">
  <div class="firstandlast">
    <div>
      <label for="firstname">First Name</label>
      <input type="text" id="firstname" size="30" placeholder="Jane">
    </div>
    <div>
      <label for="lastname">Last Name</label>
      <input type="text" id="lastname" value="Doe">
    </div>
  </div>
</form>

Answer 3

您可以使用sealed class Stream { object End: Stream() class Item(val data: Long): Stream() } val produceCtx = newSingleThreadContext("producer") // A dummy producer that send one million Longs on its own thread val producer = CoroutineScope(produceCtx).produce { for (i in (0 until 1000000L)) send(Stream.Item(i)) send(Stream.End) } val workCtx = newFixedThreadPoolContext(4, "work") val workers = Channel<Unit>(4) repeat(4) { workers.offer(Unit) } for(_nothing in workers) { // launch 4 times then wait for a task to finish launch(workCtx) { when (val item = producer.receive()) { Stream.End -> workers.close() is Stream.Item -> { workFunction(item.data) // Actual work here workers.offer(Unit) // Notify to launch a new task } } } }

这是使用flex https://codepen.io/avck25/pen/JjjqgBW的数字笔

如何使两个输入字段彼此相邻

3 个答案: