div區塊內的CSS文字間距

我如何將文字稍微向左放置，以便與附加的橙色條的抓取一致？如果我做了「文本對齊：左」，則它向左移動太遠。感謝您的幫助。div區塊內的CSS文字間距

image of what I am going for

#orange-bar { 
    width: 18%; 
    height: 43px; 
    position: left; 
    margin: 2px 0px 0px 0px; 
    background-color:#FF6633; 
    font-family:'LinotypeUniversW01-Bold 723691'; 
    color:#FFFFFF; 
    font-size: 17px; 
    vertical-align:middle; 
    line-height: 43px;} 


<html> 
<head> 
<title>Instagram</title> 
<script type="text/javascript" src="http://fast.fonts.com/jsapi/999aedb9-3bfd-4571-a6ad- 1d2b5e4de25f.js"></script> 

<link href="/static/main.css" type="text/css" rel="stylesheet"/> 
</head> 
<body> 
    <a href = '/instagram' id = 'header-name'></a> 
    <form method = 'post'> 
     <input onfocus="this.value=''" onblur="this.value='#tag search'" type = 'text' name = 'tag' id = 'tag-search' value = '#tag search'></input> 
    </form> 
    <div> 
     <input type="submit" id = "submit"> 
    </div>  
    <div id = "header-bar"></div> 
    <div id="orange-bar">#LOOKLAB</div>  
    <div id = "container">

來源

2013-06-25 Radha Kapoor

我們需要你的HTML代碼 –

而對於白條 – Sergio

的CSS是什麼'positio n：離開;'？ – Nightfirecat

你可以嘗試填充：

#orange-bar { 
    width: 18%; 
    height: 43px; 
    position: left; 
    margin: 2px 0px 0px 0px; 
    background-color:#FF6633; 
    font-family:'LinotypeUniversW01-Bold 723691'; 
    color:#FFFFFF; 
    font-size: 17px; 
    vertical-align:middle; 
    line-height: 43px; 
} 

#orange-bar p { 
    padding-left:10px; 
}

這裏是一個jFiddle向你展示它是什麼樣子。

您在回覆中提到，填充正在添加到橙色條div的寬度。這是因爲填充，邊距和邊框影響它適用於（從w3schools.com）的div的寬度：

重要提示：當您設置一個元素的寬度和高度屬性與CSS，你只要設置內容區域的寬度和高度。要計算一個元素的完整大小，您還必須添加填充，邊框和邊距。

另一種解決這個問題的方法是將填充應用於另一個標記（例如span，p或嵌套div），它們僅表示填充量而不表示寬度）。

有關填充，邊框和邊距如何影響內容區域的更多信息，請閱讀Box Model article at w3schools.com。

來源

2013-06-25 19:23:06 doodelicious

但填充也使橙色div酒吧更長。我只想移動div內的文字。 –

我修改了上面的答案，以解釋填充，邊距和邊框如何影響內容區域大小。 – doodelicious

好的，謝謝 - 你太棒了！ –

檢查出您要使用橙色條排隊元素填充左屬性。

padding-left: 10px;

來源

2013-06-25 19:18:57

我剛剛添加了html代碼 - 它非常簡單。 @sergio我不想重新創建白色條。我想要做的就是將文本元素移動到橙色欄div右側的一些像素，以便與我的屏幕抓圖保持一致。 –

position: left;

是不正確的css屬性。如果我得到您的要求，您可以使用填充如下：

padding-left:5px;

，如果你有一個以上的DIV &想他們都安排在左，那麼你可以使用下面的CSS：

padding-left:5px; text-align:left;

並利用位置指令是這樣的：

position: absolute; left:20px;

來源

2013-06-25 19:23:38 dpfarhad

但填充使我的'orange-bar'div更長。我只想移動div內的文字。 –

div區塊內的CSS文字間距

回答

相關問題