Мәтіннің ұзындығына қарамастан, жапсырма мен енгізу өрісі арасында бос орынды қалай қосуға болады?

Келіңіздер, 10 енгізу өрістері бар және сол жақта енгізу өрістері алдында мәтінді ұстап тұрған пайдаланушыға өрісте не кіретінін көрсететін тегі бар. Мен бір нәрсе жасадым, бірақ мәтіннің қаншалықты үлкен екеніне қарамастан, аралық тег пен енгізу өрісі арасында кеңістікті қалай қосу керектігін білмеймін?

Бұл сияқты:

enter image description here

12
JSFiddle-ге кейбір мысал: jsfiddle.net/qAhQf
қосылды автор starbucks, көзі
Қате сөз үшін кешірім, тіпті кеңістік делік.
қосылды автор starbucks, көзі
Ең алдымен, span орнына label пайдаланыңыз. Бұл кіріспен жұпталып, кейбір қосымша функционалдылықты сақтайды (кіріс енгізуді басу арқылы). Бәрібір. «Айнымалы тег пен кіріс арасындағы материалды қалай қосуға болады?» Деген нені білдіреді? Қандай заттар? Мазмұндарға қарамастан, барлық жапсырмалардың ені бірдей болуы керек пе?
қосылды автор Petr Čihula, көзі

8 жауаптар

span орнына label пайдаланыңыз. Бұл кіріспен жұпталып, кейбір қосымша функционалдылықты сақтайды (кіріс енгізуді басу арқылы).

Бұл дәл келсе:

HTML:


<input id="dummy1" name="dummy1" value="dummy1">


<input id="dummy2" name="dummy2" value="dummy2">


<input id="dummy3" name="dummy3" value="dummy3">

CSS:

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}

jsfiddle DEMO мұнда.

16
қосылды
Ол сондай-ақ, қол жетімділік себептері үшін, бұл жапсырма сол кіріспен байланысты және сіз focus енгізу үшін жапсырманы баса аласыз.
қосылды автор Nick R, көзі
Рахмет. Сіздің мысалыңызда сіз атау және мән төлсипатындағы мәнге тең құнды белгілеу бар. Мен аздап жаңалықтым, сондықтан қандай құндылықты белгілеу керек екенін білгім келді. Атау өрісі немесе мән өрісіндегі мән Немесе бұл бір нәрсе ме?
қосылды автор starbucks, көзі
Рахмет, мен таңбамен таңбаның төменгі жағын теңестіру мәселелерін бастан өткемін.
қосылды автор starbucks, көзі
Кез келген тегтің атрибуты/мазмұны қалағаныңызша болуы мүмкін. Сәйкес келуі керек нәрсе - бұл for төлсипатының және кірістің id атрибуты. Әр кірістің name және id бірдей болуы керек емес, бірақ сіздің пішініңізді қараған кезде одан кейінгі шатасуларды болдырмау үшін ұсынылған жақсы тәжірибе. Бұл үміт көмектеседі :)
қосылды автор Petr Čihula, көзі
@starbucks болса, жауапты қабылдауды ұмытпаңыз;)
қосылды автор Petr Čihula, көзі
@starbucks Сұрағыңызды жаңартыңыз, сонда менің жауапымды жаңарта аламын. Қазір сіздің сұрағыңызға сай бәрі шешілді.
қосылды автор Petr Čihula, көзі

Бұл жаңа CSS display: grid ( браузерді қолдау )

HTML:

<div class='container'>
  
  <input id="dummy1" name="dummy1" value="dummy1">
  
  <input id="dummy2" name="dummy2" value="dummy2">
  
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Css торын пайдаланған кезде, әдепкі элементтер бойынша баған баған бойынша, содан кейін жол бойынша қатар қойылады. grid-template-columns ережесі екі бағанның бағандарын жасайды, олардың біреуі жалпы көлденең кеңістіктің 1/4 бөлігін, ал екіншісі көлденең кеңістіктің 3/4 бөлігін алады. Бұл қажетті нәтиже жасайды.

grid

JS-FIDDLE

2
қосылды
Ең жақсы шешім.
қосылды автор Bcktr, көзі

Бұл жаңа CSS display: grid ( браузерді қолдау )

HTML:

<div class='container'>
  
  <input id="dummy1" name="dummy1" value="dummy1">
  
  <input id="dummy2" name="dummy2" value="dummy2">
  
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Css торын пайдаланған кезде, әдепкі элементтер бойынша баған баған бойынша, содан кейін жол бойынша қатар қойылады. grid-template-columns ережесі екі бағанның бағандарын жасайды, олардың біреуі жалпы көлденең кеңістіктің 1/4 бөлігін, ал екіншісі көлденең кеңістіктің 3/4 бөлігін алады. Бұл қажетті нәтиже жасайды.

grid

JS-FIDDLE

2
қосылды
Ең жақсы шешім.
қосылды автор Bcktr, көзі

Сіз кестені пайдалана аласыз

<table class="formcontrols" >   
    <tr>
        <td>
            
        </td>
        <td  style="padding-left:10px;">
            <input id="Test" name="Test" value="John">
        </td>
    </tr>
    <tr>
        <td>
            
        </td>
        <td  style="padding-left:10px;">
            <input id="lastName" name="lastName" value="Travolta">
        </td>
    </tr>
</table>

The result would be: ImageResult

2
қосылды

Сіз кестені пайдалана аласыз

<table class="formcontrols" >   
    <tr>
        <td>
            
        </td>
        <td  style="padding-left:10px;">
            <input id="Test" name="Test" value="John">
        </td>
    </tr>
    <tr>
        <td>
            
        </td>
        <td  style="padding-left:10px;">
            <input id="lastName" name="lastName" value="Travolta">
        </td>
    </tr>
</table>

The result would be: ImageResult

2
қосылды

Сондай-ақ, төмендегі кодты қолдануға болады

      <html>
 <head>
</head>
<body>
<form action="yourclassName.jsp">
  First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit"> </form> </body> </html>
2
қосылды
Белгіге арналған пайдаланбаңыз, семантикалық түрде дұрыс
қосылды автор Nick R, көзі

Сіз әрқашан этикетканың ішіндегі 'pre' таңбасын қолдануға болады және жай бос орындарды енгізіңіз, сондықтан Сіз әрқашан қажет бірдей немесе әртүрлі бос орындарды қосуға болады

<form>
<input type="text">
<input type="text">
</form>

0
қосылды

Сіз әрқашан этикетканың ішіндегі 'pre' таңбасын қолдануға болады және жай бос орындарды енгізіңіз, сондықтан Сіз әрқашан қажет бірдей немесе әртүрлі бос орындарды қосуға болады

<form>
<input type="text">
<input type="text">
</form>

0
қосылды