标签: margin

我正在使用 Foundation 4 框架创建一个服务器文件表，并且似乎遇到一个问题：当文件名长到两行时，并非所有行都可单击。我需要整个阴影行作为链接。

请参阅我在 Photoshop 中突出显示的可点击区域的图像。

每行的HTML结构如下：

<div class="fileTable row alternate">
    <a class="icon folder" href="#">
        <div class="large-10 columns margin">test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder</div>
        <div class="large-2 hide-for-small columns margin">23/05/2013</div>
    </a>
</div>

.margin 的类别似乎是问题所在。添加它是为了使文本在每行内垂直居中，它在顶部和底部添加了 7px。我本来会使用 line-height 并将其设置为每行相同的高度（44px），但这会导致两行上的任何文件名的行之间存在巨大间隙。

上面的屏幕截图正是我需要的样子，只是由于某种原因它不能正确地作为链接。

fileTable 链接的 CSS 如下：

.fileTable a {
    display: block;
    line-height: 25px;
    text-decoration: none;
    color: #000000;
    padding-left: 40px;
}

.margin {
    margin-top: 7px; …

我有一个带有页脚的页面，在 html 中定义如下：

<div id='footer'>
    <span style="float:left;">
        Contact me at <a href='mailto:admin@test.com'>admin@test.com</a>
    </span>
    <span style="float: right;">test</span>
</div>

页脚 div 的 CSS 是这样的：

#footer {
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 998;
    width: 100%;
    background-color: #000000;
    padding: 2px 0 3px 20px;
    border-top: 3px groove #aaaaaa;
    font: 11pt Arial;
}

我通过谷歌搜索发现，填充 div 会将该填充添加到尺寸中。在我的例子中，向左填充 20px 就是在宽度上添加 20px，因此 div 的新宽度是 100% + 20px，而这些额外的 20px 超出了视口的右边缘。

我发现很多人说使用边距而不是填充，所以我尝试使用 margin-left: 20px 而不是填充，但“测试”文本仍然在屏幕右侧。

如何模拟填充的外观，但没有正确的浮动文本离开屏幕？

下午好，

将两个 CardView 并排放置（在同一行上）并在它们之间留有边距的最佳方法是什么？

感谢您的帮助！

index.ts
bubbles: any [][] = [['80%','Meeting'],['20%','Meeting']]

index.html
<div *ngFor="let bubble of bubbles">
      <div class="bubble" style="margin-left:{{bubble[0]}};">
      </div>
</div>

我试图让 margin-left 样式使用数组 bubbles[0] 中的数据。

for 循环在该布局中给出了 ['80%','Meeting']，因此我尝试将该数组的 0 元素设置为 margin-left 样式，但这不起作用。还有其他方法可以完成这个过程吗？

我有一个在我的XML布局中创建的FrameView,在我的代码中,我正在尝试创建一系列新的ImageView并将它们添加为此FrameView的子项.ImageViews很小,只有大约15像素的正方形,我希望它们显示在FrameView周围的各个位置(我正在尝试实现看起来像雷达屏幕).我能够创建它们并将它们添加得很好,它们会出现在屏幕上.但是,当我尝试设置边距时,它似乎没有任何效果.无论我设置什么,所有的ImageView都显示在FrameView的左上角,而不是偏移适当的边距.下面列出了我的XML布局,以及生成子视图的代码.难道我做错了什么？如何才能使边距正确显示？或者有更好的方法来做到这一点,而不是使用边距.

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/RadarBackground"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@drawable/radar_bg">
 <FrameLayout 
   android:id="@+id/RadarFrame" 
   android:layout_width="320dip" 
   android:layout_height="320dip" 
   android:layout_marginTop="25dip">
 </FrameLayout>
</LinearLayout>

Java的:

for (int i = 0; i < getData().getTargetCount(); i ++) {
 int id = getData().getTargetId(i);
 Log.d(T.TAG_A, "Radar: plotting target " + id);
 TargetView tv = new TargetView(this, id, getData().getTargetName(id));
 FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(
   LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
 lp.setMargins(
   radarCenterX + (int) (getData().calcTargetRadarX(id, radarSize) / radarScale) - (targetSizeX / 2), 
   radarCenterY - (int) (getData().calcTargetRadarY(id, radarSize) / radarScale) - (targetSizeY / 2), 
   0, …

HTML(3倍):

<div class="scream">
  <div class="author">
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" />
  </div>
  <div class="data">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
  </div>
  <div class="clearer"></div>
</div>

CSS:

.scream {
  background: #F4F4F4;
  width: 944px; height: 48px;
}

.scream .author {
  float: left;
}

.scream .data {
  float: left;
}

.clearer { clear: both; }

这是它在我的浏览器上的样子:

如您所见,height设置为48px.图像大小也是48px.怎么说我没有看到每个div.scream分开的线？height例如,如果我设置为50px,那么一切正常!在我看来,这是因为有某种边界/轮廓/边缘/填充破坏了我的生活.不幸的是,使用FireBug我没有看到类似的东西......

HTML:

<div id="outter">
    <div id="left">
        <div id="up">
            This is the up div
        </div>
        <div id="down">
            <h3>This is the down div</h3>
        </div>
    </div>
</div>   

CSS:

#outter{
    height: 400px;
    background: white;
    border: 1px solid #bfd2e1;
}
#left{
    float: left;
    margin-right: 0;
    padding: 0;
}
#up{
    width: 355px;
    height: 50px;
    border: 1px solid #ffe59f;
    padding: 12px;
    line-height: 16pt;
    margin: 15px 0 0 15px;
}
#down{
    float: left;
    margin: 15px 0 0 15px;
    width: 381px;
}
#down h3{
    border: 1px solid #bfd2e1;
    background-color: #edf6fe; …

如何将中心<img>放入容纳中<div>？

通常margin-left: auto; margin-right: auto;是行不通的.

图像可以比容器大,并通过max-width和水平或垂直缩放max-height.

以下代码的jsfiddle:http://jsfiddle.net/9ShGj/1/

HTML:

<div class="container">
   <img src="http://www.yensa.com/fat/fat-dude10.jpg" />
</div>
<div class="container">
   <img src="http://oi43.tinypic.com/bje2wn.jpg" />
</div>

CSS:

.container {
 width: 200px;
 height: 200px;
 background: rgb(120, 120, 120);
 border: 1px solid red;
 margin: 5px;
}

.container img {
 max-width: 200px;
 max-height: 200px;
 margin-left: auto;
 margin-right: auto;
 vertical-align: middle;
}

我想更改标签和简单HTML表单输入之间的边距。标签在输入字段下方。当我设置一个类时，我可以更改其他属性，例如字体大小，但不能更改边距。

我有一个40px边距的"身体".

此外,我想添加一个100%高度和100%重量与"静态位置"的div.

我的问题是我的'div'超越了'身体'!我希望我的div填充'body'(尊重它的边缘:40p​​x).

我怎么解决这个问题 ？

THKS

MY JS FIDDLE

body { 
    background:pink;
    margin:40px;
    }

.contenuWorks {
    height:100%;
    width: 100% ;
    background:red;
    position:absolute;
    }