Way not to break a line when creating an input element

Asked

Viewed 152 times

0

I started a project in HTML, CSS and Javascript and came across the following situation: when I create an input element in html it automatically skips a line in relation to the other elements, I would like to know a way for this input to be in the same line as the other two elements. (in this case, a label and a span).

const input = document.querySelector('input.command')
const dir = document.querySelector('span.dir')

let currentDir = "D:\\Users\\currentUser"

dir.innerHTML = currentDir
body{
    background-color: #282A36;
    color: #FFFFFF;
    border: none;
    font-size: 15px;
    font-family: "Fira Code";
}

input.command{
    color: #FFFFFF;
    border: none;
    font-size: 15px;
    font-family: "Fira Code";
    background-color: #282A36;
    outline: none;
    margin-left: 0px;,
    text-align: center;
}
span, label{
    color: #FFFFFF;
    border: none;
    font-size: 15px;
    font-family: "Fira Code";
    background-color: #282A36;
    outline: none;
}
span, label, input{
    display: inline-flexbox;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Ice</title>
</head>
<body>
    <span class="dir"></span>
    <label class="incode"></label>
    $<input class="command" size="123">
    <script src="app.js"></script>
</body>
</html>

html css line-breaks css-display

2 answers

0


A width for your input.

main{
  width: 100%
}
input:text{
  width: 50%;
}
<main>
  <input type="text">
  <input type="text">
</main>

Another method would be using flexbox.

.container{
  display: flex;
  flex-direction: row;
}
<main class="container">

  <label>Nome: </label>
  <input type="text">
  <input type="submit" value="Enviar">
</main>

  • because it is a terminal, as you would to make it, when crossing the line boundary, it will display the text on the bottom line?

  • In this case, it would have to be done in javascript to assign width = 100% when input X number of characters.

-2

use class="col-2 or 3", and check if you can align your tags as you wish, the col limit is 12, so distribute so that it fits all within the limit, so that they will be on the same line

  • but where part of the code would be implemented this class="col-3"??

  • For example: <body> <span class="dir col-4"></span> <label class="incode col-4"></label> $<input class="command col-4" size="123"> <script src="app.js"></script> </> body 'cause they’re within 12 per line, you understand? See if it works.

  • You can also create a <div class="col-4"> </div> in each "input/label" to organize, then you group your div’s inside another that clusters them all being "col-12"

  • I tested this method and it seems that he considers col-4 as the class name.

  • It goes like this:<body> <div class="col-12"> <div class="col-4"> <span class="dir"></span> </div> <div class="col-4"> <label class="incode"></label> </div> <div class="col-4"> $<input class="command" size="123"> </div> </div> </body>

Browser other questions tagged html css line-breaks css-display

You are not signed in. Login or sign up in order to post.