0

我如何将我的文本稍微向左放置，以使其与附加的橙色条的抓取一致？如果我执行“文本对齐：左”，它会向左移动太远。感谢您的帮助。

我要做什么的图片 

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

3 回答 3

2

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

padding-left: 10px;
于 2013-06-25T19:18:57.923 回答
1

您可以尝试填充：

#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 设置元素的宽度和高度属性时，您只需设置内容区域的宽度和高度。要计算元素的完整大小，您还必须添加填充、边框和边距。

为您解决此问题的另一种方法是将填充应用于另一个标记（例如跨度、p 或嵌套 div），该标记仅声明填充量而不是宽度）。

有关填充、边框和边距如何影响内容区域的更多信息，请阅读w3schools.com 上的框模型文章。

于 2013-06-25T19:23:06.203 回答
0 
position: left;

不是正确的 CSS 属性。如果我得到您的要求，您可以使用如下填充：

padding-left:5px;

如果您有多个 div 并且想将它们全部排列在左侧，那么您可以使用以下 css：

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

并且使用位置命令是这样的：

position: absolute; left:20px;
于 2013-06-25T19:23:38.607 回答