Input in square, css

Question

Input in square, css

Navigation

#1 by (4 votes)

2

I have to take the following format that I must replicate:

The fact is that it does not come out and I do not know what else to do.

I have the following code:

<div style="display: flex; -ms-flex-wrap: wrap;flex-wrap: wrap; margin-right: -15px; margin-left: -15px;">
            <div style="flex: 0 0 100%; max-width: 100%;text-align:center"><b>CONCENTIMIENTO INFORMADO:</b></div>
            <div style="float:left;width:2%">Yo</div><div style="border-bottom:1px dashed #000;float:right;width:30%"><input type="text" style="border: 0;width:100%" value=""></div> <div style="float:left;width:68%;index-z:1"> mayor de edad, habiéndome informadosobre el cuadro clinico, autorizo la referencia, teniendo en cuenta que he sido informado claramente sobre los riesgos y beneficiosque se pueden presentar.</div>
            
        </div>

html css

asked by Shassain 10.12.2018 в 23:56

source

1 answer

Error building a JSON in PHP Hangman game - Java

score 4 · Accepted Answer

I would do it this way (without flex , only with display:inline ):

.container {
  margin: 30px 5px;
}
.head{
  max-width: 100%;
  text-align: center;
  margin-bottom:20px;
}
.text{
  display:inline;
}
.cont-box {
  border-bottom: 1px dashed #000;
  display:inline;
}
.box{
   border: 0;
   width:150px;
}

<div class="container">
  <div class="head">
    <b>CONSENTIMIENTO INFORMADO:</b>
  </div>
  <div class="text">Yo</div>
  <div class="cont-box">
    <input type="text" class="box" value="">
  </div>
  <div class="text"> mayor de edad, habiéndome informadosobre el cuadro clinico, autorizo la referencia, teniendo en cuenta que he sido informado claramente sobre los riesgos y beneficiosque se pueden presentar.
  </div>
</div>

And a simplified version (thanks to blonfu for the contribution):

.container {
  margin: 30px 5px;
}
.text {
  display: inline;
}
.box {
  border: 0;
  border-bottom: 1px dashed #000;
  width: 150px;
}
h3 {
  text-align: center;
  margin-bottom: 20px;
}

<div class="container">
  <h3><b>CONSENTIMIENTO INFORMADO:</b></h3>
  <p>Yo <input type="text" class="box" value=""> mayor de edad, habiéndome informadosobre el cuadro clinico, autorizo la referencia, teniendo en cuenta que he sido informado claramente sobre los riesgos y beneficiosque se pueden presentar. </p>
</div>