Question

如何使左侧边栏文字右对齐，但距离右边距约1％。

当我执行padding-right: 1%;时，它会开始覆盖边距

另外，如何让圆圈位于文字上方？

编辑 - 刚刚编辑了链接

Answer 1

您可以在.left班级上使用：

direction:rtl;
text-indent: 1%;

另一种选择是：

在div内创建.left并将其称为.inner-left，然后将此CSS添加到您的代码中：

// HTML
<div class="left">
    <div class="inner-left">
        LEFT
    </div>
</div>

// CSS
.inner-left {
    text-align: right;
    width: 95%; /* change this value if you need */
}

ps：不要忘记运行jsfiddle来测试更改

希望它有所帮助。

Answer 2

我认为你最好的选择是使用盒子模型来设置边距/填充，并使用文本对齐属性和边距自动以及设置对象应该如何显示（块，内联等）。我用你给出的小提琴示例玩了一下，并使用盒子模型在父级内正确设置元素。很抱歉，我使用了内联CSS，但它只是一个示例，您可以提取并传输到主CSS文件。

以下是新的小提琴测试： http://jsfiddle.net/5AUMA/26/

并且框模型参考位于： http://www.w3schools.com/css/css_boxmodel.asp

代码示例以防万一（但小提琴完全完成）：

<div class="left">
<div style="padding-right:5%; display:block; text-align:right;" >
    <img style="margin:auto; margin-right:0; max-width:50%; max-height:50%; display:block;"  src="http://img.photobucket.com/albums/v436/passion4architecture/LOGO_ROUND%20and%20CIRCLE/Logo_The-Circle-of-Reason_wwwcircleofreasonorg_dian-hasan-branding_US-2_zpsf675b4a5.png" />
    hello
    </div>

LEFT

这应该有助于满足您当前的所有需求。

Ps：对于任何元素（包括图像）最好使用css来调整宽度/高度和对齐。

干杯：）

右边填充会覆盖边距

2 个答案: