跨度/格內的奇數對齊

我有一個跨度包含文本以及輸入字段。我想知道是否可以將文本對齊到左側，並且輸入字段與右側對齊。跨度/格內的奇數對齊

<span class="textBox">NAME: <input type="text" id="NAME"/></span> 

.textBox{ 
    display:inline-block; 
    width:450px 
}

第一個例子是我的跨度，然後是它的當前CSS樣式。

來源

2013-08-20 Jinjubei

將'float：right'添加到輸入中？ –

只是一個小竅門 - 你可能會將標籤包裹在帶'for'屬性的'label'標籤中，因爲輸入不會緊挨着另一個......只是一個輔助提示。像http://jsfiddle.net/brbcoding/Ju7C6/ – brbcoding

@brbcoding不完全我的代碼，我打算這樣做。這是我正在採取的一系列清理步驟中的第一個。 – Jinjubei

文本將被排列在默認情況下左邊，所以你可以靜靜地飄浮在輸入正確的：

.textBox input{ 
    float:right; 
}

或者，你應該更喜歡使用的定位，而不是浮動的：

.textBox input{ 
    position:absolute; 
    right:0; 
    top:0; 
}

記住，父母將需要一個位置，不是默認：

.textBox{ 
    display:inline-block; 
    width:450px; 
    position:relative; 
}

JSFiddle

來源

2013-08-20 13:56:18 George

+1有兩種方式使用'浮動'並以'position'爲例。 –

Fiddle

.textBox{ 
    display:inline-block; 
    width:450px; 
    padding:5px; 
    background-color:#eee; 
    overflow:auto; 
} 

.textBox input{ 
    float:right; 
}

加推向右，overflow:auto集裝箱獲得浮動權清除浮動

enter image description here

來源

2013-08-20 13:57:16 AdityaSaxena

定位將是比浮動更好的方式。 –

爲什麼會這樣？考慮到每個文本框都必須相對定位？ – AdityaSaxena

因爲幾乎每個設計師都像你一樣濫用'float'屬性。浮法是用於文本中的圖像。爲什麼你認爲浮動時需要「清除」？仍然你的例子適合這個問題，我知道它的工作原理，這只是一個評論。 –

這並不難。

考慮一下：

HTML：

<span class="textBox">NAME: 
    <input type="text"class='text1' id="NAME"/> 
</span>

CSS：

.textBox{ 
    display:inline-block; 
    width:450px; 

} 

.text1{ 
    display:inline-block; 
    float:left; 
}

在這裏找到小提琴：http://jsfiddle.net/TbB3S/

你只需給float:left輸入文字即可。

來源

2013-08-20 14:01:22

不要以爲這是OP正在尋找的東西......他們想要相反的方式。 – brbcoding

@brbcoding：哦，從問題中無法理解。 –

跨度/格內的奇數對齊

回答

相關問題