Question

我如何将文字略微放在左侧，以便与附加的橙色条的抓取一致？如果我做“Text-Align：Left”，它向左移动太远。谢谢你的帮助。

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">

Answer 1

检查要与橙色条对齐的元素的padding-left属性。

padding-left: 10px;

Answer 2

您可以尝试填充：

#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的宽度。这是因为填充，边距和边框会影响它所应用的div的宽度（来自w3schools.com）：

重要说明：设置元素的宽度和高度属性时使用CSS，您只需设置内容区域的宽度和高度。至计算元素的完整大小，还必须添加填充，边界和边距。

解决此问题的另一种方法是将填充应用于另一个标记（例如span，p或嵌套div），它只是表示填充量而不是宽度）。

有关填充，边框和边距如何影响内容区域的更多信息，请阅读Box Model article at w3schools.com。

Answer 3

position: left;

不是正确的css属性。如果我的请求正确，你可以使用填充如下：

padding-left:5px;

如果您有多个div＆amp;想要将它们全部安排在左边，那么你可以使用以下css：

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

并使用position命令是这样的：

position: absolute; left:20px;

Div块内的CSS文本间距

3 个答案: