จัดแนวป้ายกำกับในแบบฟอร์มถัดจากอินพุต

Question 1

ฉันมีสถานการณ์ของรูปแบบพื้นฐานและเป็นที่รู้จักซึ่งฉันต้องจัดแนวป้ายกำกับถัดจากอินพุตให้ถูกต้อง อย่างไรก็ตามฉันไม่รู้ว่าจะต้องทำอย่างไร

เป้าหมายของฉันคือการจัดเรียงป้ายกำกับถัดจากอินพุตทางด้านขวา นี่คือตัวอย่างรูปภาพของผลลัพธ์ที่ต้องการ

ป้อนคำอธิบายภาพที่นี่

ฉันทำซอเพื่อความสะดวกของคุณและเพื่อชี้แจงสิ่งที่ฉันมีตอนนี้ - http://jsfiddle.net/WX58z/

ตัวอย่างข้อมูล:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

ขยายข้อมูลโค้ด

Question 2

คำเตือน: คำตอบที่ล้าสมัย

ทุกวันนี้คุณควรหลีกเลี่ยงการใช้ความกว้างคงที่อย่างแน่นอน คุณสามารถใช้ flexbox หรือ CSS grid เพื่อสร้างโซลูชันที่ตอบสนองได้ ดูคำตอบอื่น ๆ

ทางออกที่เป็นไปได้ทางเดียว:

ให้ฉลากdisplay: inline-block;
ให้ความกว้างคงที่
จัดแนวข้อความไปทางขวา

นั่นคือ:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

ขยายข้อมูลโค้ด

JSFiddle

Question 3

แม้ว่าโซลูชันที่นี่จะใช้งานได้ แต่เทคโนโลยีล่าสุดได้สร้างขึ้นเพื่อสิ่งที่ฉันคิดว่าเป็นทางออกที่ดีกว่า CSS Grid Layoutช่วยให้เราจัดโครงสร้างโซลูชันที่สวยงามยิ่งขึ้น

CSS ด้านล่างมีโครงสร้าง "การตั้งค่า" 2 คอลัมน์โดยคอลัมน์แรกคาดว่าจะเป็นป้ายกำกับที่จัดชิดขวาตามด้วยเนื้อหาบางส่วนในคอลัมน์ที่สอง สามารถนำเสนอเนื้อหาที่ซับซ้อนมากขึ้นในคอลัมน์ที่สองโดยการรวมไว้ใน <div>

[หมายเหตุด้านข้าง: ฉันใช้ CSS เพื่อเพิ่ม ":" ที่ลากเส้นป้ายกำกับแต่ละป้ายเนื่องจากนี่เป็นองค์ประกอบที่มีสไตล์ - ความชอบของฉัน]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

ขยายข้อมูลโค้ด

Question 4

ตอบคำถามเช่นนี้มาก่อนคุณสามารถดูผลลัพธ์ได้ที่นี่:

การสร้างฟอร์มให้มีเขตข้อมูลและข้อความอยู่ติดกัน - วิธีการเชิงความหมายคืออะไร?

ดังนั้นในการใช้กฎเดียวกันกับซอของคุณคุณสามารถใช้display:inline-blockเพื่อแสดงป้ายกำกับและกลุ่มอินพุตของคุณเคียงข้างกันดังนี้:

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

ปรับปรุงซอ

Question 5

ฉันใช้สิ่งที่คล้ายกับสิ่งนี้:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

สไตล์:

.form-element label {
    display: inline-block;
    width: 150px;
}

Question 6

คุณยังสามารถลองใช้เฟล็กบ็อกซ์

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

Question 7

ฉันรู้ว่านี่เป็นเธรดเก่า แต่วิธีแก้ปัญหาที่ง่ายกว่าคือการฝังอินพุตไว้ในป้ายกำกับดังนี้:

<label>Label one: <input id="input1" type="text"></label>

ขยายข้อมูลโค้ด

Question 8

นี่คือความกว้างของป้ายทั่วไปสำหรับป้ายทุกรูปแบบ ไม่มีอะไรแก้ไขความกว้าง

เรียกเครื่องคิดเลข setLabelWidth พร้อมป้ายกำกับทั้งหมด ฟังก์ชันนี้จะโหลดป้ายกำกับทั้งหมดบน UI และค้นหาความกว้างของฉลากสูงสุด ใช้ค่าส่งคืนของฟังก์ชันด้านล่างกับป้ายกำกับทั้งหมด

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

Question 9

คุณสามารถทำสิ่งนี้:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

หวังว่านี่จะช่วยได้! :)