Fatal编程技术网
  • html/
  • Html 不能在具有相同类的3个div中内联按钮

Html 不能在具有相同类的3个div中内联按钮

html css

Html 不能在具有相同类的3个div中内联按钮,html,css,inline,Html,Css,Inline,我有3个div，它们的类相同，如下所示： <main> <div class="item"> <img src="images/StormTrooper.png" alt="" /> <h3>Return of the Jedi</h3> <p>E P I S O D E 6</p> <butto

我有3个div，它们的类相同，如下所示：

<main>
        <div class="item">
            <img src="images/StormTrooper.png" alt="" />
            <h3>Return of the Jedi</h3>
            <p>E P I S O D E 6</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/R2D2.png" alt="" />
            <h3>The Force Awakens</h3>
            <p>E P I S O D E 7</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/Falkon.png" alt="" />
            <h3>The Last Jedi</h3>
            <p>E P I S O D E 8</p>
            <button type="button" name="button">Watch Now</button>
        </div>
    </main>
长话短说，预期输出如下图所示：
如果您能提供一些帮助，我们将不胜感激。

相应地对图像应用高度，这将解决问题

.item img {
    width: 100px;
    height:100px;
    display: inline;
}
对图像应用相应的高度可以解决这个问题

.item img {
    width: 100px;
    height:100px;
    display: inline;
}
您的图像大小弄乱了标记以及标题和段落标记的边距，我在您提供的代码中更改了一些CSS，请查看，可能会有所帮助

HTML

<main>
        <div class="item">
            <img src="images/StormTrooper.png" alt="" />
            <h3>Return of the Jedi</h3>
            <p>E P I S O D E 6</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/R2D2.png" alt="" />
            <h3>The Force Awakens</h3>
            <p>E P I S O D E 7</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/Falkon.png" alt="" />
            <h3>The Last Jedi</h3>
            <p>E P I S O D E 8</p>
            <button type="button" name="button">Watch Now</button>
        </div>
    </main>
这是一个

你的图像大小弄乱了你的标记以及标题和段落标记的边距，我在你提供的代码中修改了一些CSS，请查看，可能会有帮助

HTML

<main>
        <div class="item">
            <img src="images/StormTrooper.png" alt="" />
            <h3>Return of the Jedi</h3>
            <p>E P I S O D E 6</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/R2D2.png" alt="" />
            <h3>The Force Awakens</h3>
            <p>E P I S O D E 7</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/Falkon.png" alt="" />
            <h3>The Last Jedi</h3>
            <p>E P I S O D E 8</p>
            <button type="button" name="button">Watch Now</button>
        </div>
    </main>
这是一个您必须指定
的
高度
。项目img
和
。项目h3
，因为图像可能具有不同的高度，文本可能具有不同的长度



@import”https://fonts.googleapis.com/css?family=Lato";
* {
保证金：0；
填充：0
}
主要{
字体系列：拉托，无衬线；
背景#729fcf；
填充：20px；
显示器：flex；
证明内容：中心；
}
.项目{
背景：#f0ebff；
宽度：300px；
高度：350px；
利润率：20px；
文本对齐：居中；
填充：20px；
框大小：边框框；浮动：左侧；
}
.项目img{
宽度：100px；
高度：50px；
显示：内联；
}
.项目h3{
文本转换：大写；
利润率：15px0；
高度：50px；
}
.项目p{
利润率：35px0；
字体大小：12px；
}
.项目按钮{
背景：0；
填充：10px；
边框：3px实心#6076cc；
边界半径：10px；
字体大小：12px；
利润上限：35px；
}
[1]: https://i.stack.imgur.com/2QxOA.jpg



绝地归来
E p I S O D E 6

现在看
原力觉醒了
E p I S O D E 7

现在看
最后的绝地武士
E p I S O D E 8

现在看

您必须指定
项目img
和
的
高度
。项目h3
，因为图像可能具有不同的高度，文本可能具有不同的长度



@import”https://fonts.googleapis.com/css?family=Lato";
* {
保证金：0；
填充：0
}
主要{
字体系列：拉托，无衬线；
背景#729fcf；
填充：20px；
显示器：flex；
证明内容：中心；
}
.项目{
背景：#f0ebff；
宽度：300px；
高度：350px；
利润率：20px；
文本对齐：居中；
填充：20px；
框大小：边框框；浮动：左侧；
}
.项目img{
宽度：100px；
高度：50px；
显示：内联；
}
.项目h3{
文本转换：大写；
利润率：15px0；
高度：50px；
}
.项目p{
利润率：35px0；
字体大小：12px；
}
.项目按钮{
背景：0；
填充：10px；
边框：3px实心#6076cc；
边界半径：10px；
字体大小：12px；
利润上限：35px；
}
[1]: https://i.stack.imgur.com/2QxOA.jpg



绝地归来
E p I S O D E 6

现在看
原力觉醒了
E p I S O D E 7

现在看
最后的绝地武士
E p I S O D E 8

现在看

添加到。项目位置：相对；
然后你可以这样做：


.item button {
    position:absolute;
    bottom:10px;
    background: 0;
    border: 3px solid #6076cc;
    border-radius: 10px;
    font-size: 12px;
}



这将使按钮距离。项目底部10px添加到。项目位置：相对；
然后你可以这样做：


.item button {
    position:absolute;
    bottom:10px;
    background: 0;
    border: 3px solid #6076cc;
    border-radius: 10px;
    font-size: 12px;
}



这将使按钮距离底部10px。item
我添加了不同大小的图像，并对CSS进行了一些更改。无论图像大小如何，按钮都将保持内联。通过调整屏幕大小和使用更长的标题来测试它。这是你的电话号码



@import”https://fonts.googleapis.com/css?family=Lato";
* {
保证金：0；
填充：0
}
主要{
字体系列：拉托，无衬线；
背景#729fcf；
填充：20px；
显示器：flex；
证明内容：中心；
}
.项目{
背景：#f0ebff；
宽度：200px；
利润率：20px；
文本对齐：居中；
填充：20px；
框大小：边框框；浮动：左侧；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.项目img{
保证金：自动0；
宽度：100%；
显示：内联；
}
.项目h3{
文本转换：大写；
利润率：15px0；
}
.项目p{
保证金：5px0；
}



绝地归来
E p I S O D E 6

现在看
原力觉醒了
E p I S O D E 72345

现在看
最后的绝地武士
E p I S O D E 8

现在看

我添加了不同大小的图像，并对CSS进行了一些更改。无论图像大小如何，按钮都将保持内联。通过调整屏幕大小和使用更长的标题来测试它。这是你的电话号码



@import”https://fonts.googleapis.com/css?family=Lato";
* {
保证金：0；
填充：0
}
主要{
字体系列：拉托，无衬线；
背景#729fcf；
填充：20px；
显示器：flex；
证明内容：中心；
}
.项目{
背景：#f0ebff；
宽度：200px；
利润率：20px；
文本对齐：居中；
填充：20px；
框大小：边框框；浮动：左侧；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.项目img{
保证金：自动0；
宽度：100%；
显示：内联；
}
.项目h3{
文本转换：大写；
利润率：15px0；
}
.项目p{
保证金：5px0；
}



绝地归来
E p I S O D E 6