Question

我有7个图像对齐，但每个图像之间有一个小空间。我一直试图摆脱这个空间，但随后图像开始重叠。每张图片都在div中。

HTML

const int NAME_MAX_CHARACTERS = 15;

public mainForm()
{
    InitializeComponent();
}

private void addButton_Click(object sender, EventArgs e)
{
    if(!Validate())
    {
        return;
    }

    // I need to check if the content is valid before adding it to the form
    ListViewItem item = new ListViewItem(this.nameTextBox.Text);
    this.listView1.Items.Add(item);
}

private void nameTextBox_Validating(object sender, CancelEventArgs e)
{
    e.Cancel = !Validate();
}

private bool Validate()
{
    string nameText = nameTextBox.Text;

    if(String.IsNullOrEmpty(nameText))
    {
        this.mainFormErrorProvider.SetError(this.nameTextBox, "I am sorry but the name cannot be empty");
        return false;
    }

    if(nameText.Contains(" "))
    {
        this.mainFormErrorProvider.SetError(this.nameTextBox, "I am sorry but the name cannot contain spaces");
        return false;
    }

    if (nameText.Length > 15)
    {
        this.mainFormErrorProvider.SetError(this.nameTextBox, "I am sorry, but the name cannot have more than " + NAME_MAX_CHARACTERS + " characters");
        return false;
    }

    return true;
}

CSS

<div class="row wrapper">
          <div class="col container"><img ng-src="{{data.firstDisplay.src}}" alt="?"></div>
          <div class="col container"><img ng-src="{{data.secondDisplay.src}}" alt="?"></div>
          <div class="col container"><img ng-src="{{data.thirdDisplay.src}}" alt="?"></div>
          <div class="col container"><img ng-src="{{data.forthDisplay.src}}" alt="?"></div>
          <div class="col container"><img ng-src="{{data.fifthDisplay.src}}" alt="?"></div>
          <div class="col container"><img ng-src="{{data.sixthDisplay.src}}" alt="?"></div>
          <div class="col container"><img ng-src="{{data.seventhDisplay.src}}" alt="?"></div>
        </div>

我尝试使用浮点数和保证金：0但没有任何效果。任何建议都会有帮助。此外，是否可以用图标代替alt？我目前正在使用离子。

Answer 1

尝试：

img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding:0;
    max-width: 100%;
}
.container {
     max-width: 100%;
     padding:0;

}

您应该使用chrome或firefox的开发人员工具来检查您的代码。他们非常有帮助

Answer 2

在font-size: 0

上试试.wrapper

它将消除每个内联块之后的空间，这是因为它总是存在一些字体问题。

如果要包含文字，请重置子项的字体大小。

* {
    box-sizing: border-box;
}

.wrapper {
   font-size: 0;
}

.container {
    display: inline-block;
    width: 25%;
 }

img {
    display: inline-block;
    max-width: 100%;
}

<div class="row wrapper">
          <div class="col container"><img src="http://i.imgur.com/rYqCOO2.png?2" alt="?"></div>
          <div class="col container"><img src="http://i.imgur.com/VNLbhsV.png?1" alt="?"></div>
          <div class="col container"><img src="http://i.imgur.com/5hQOv35.png?1" alt="?"></div>
          <div class="col container"><img src="http://i.imgur.com/ozNSHXi.png?1" alt="?"></div>
  </div>

如果你想摆脱一些HTML代码，你可能会这样做..

    * {
        box-sizing: border-box;
    }

    .wrapper {

       font-size: 0;
    }

    .container {
        display: inline-block;
        width: 25%;
     }

<div class="row wrapper">
    <img class="col container" src="http://i.imgur.com/rYqCOO2.png?2" alt="?">
    <img class="col container" src="http://i.imgur.com/VNLbhsV.png?1" alt="?">
    <img class="col container" src="http://i.imgur.com/5hQOv35.png?1" alt="?">
    <img class="col container" src="http://i.imgur.com/ozNSHXi.png?1" alt="?">
</div>

在html上互相粘贴一堆图像

2 个答案: