alignment 相关问题

在GUI（包括网页）上下文中，对齐是指视觉元素的定位。在编程上下文中，对齐是对象在内存地址上的放置，通常是一些小因素的倍数。

ToggleButtonGroup Material Ui - 如何排列 2 x 2 2 行 2 列

如果我在切换按钮中使用网格，则 OnChange 事件不起作用使用网格或堆栈事件效果很好我如何排列 2 x 2 按钮我在 Material ui 网站上看不到任何关于此的示例...

reactjs button material-ui alignment togglebutton

回答 2 投票 0

如何在 CSS 中正确实现 #ID:hover{} 且不会与其他 HTML 元素错位？

所以，我第一次尝试使用元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，其中有多个链接，如 ... 所以，我第一次尝试使用 <div> 元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，它有多个 <a> 链接，因为 <img> 的目标是拥有一个用作动画的 #Image:hover 函数。实施也很顺利，但现在我遇到了我的问题，我没有发现任何具体的问题......每当我将鼠标悬停时，img 元素就会与其他 img 错位。现在我想知道我可以实施什么，这样它就不会错位...... 我有这个 CSS 部分： #Icons { margin: 8px 0 0; padding: 0; display: block; background-color: transparent; min-height: 43px; height: 43px; max-height: 43px; } #Image { margin: 0; padding: 0; width: 40px; height: 40px; } #Image:hover { margin: 0; padding: 0; width: 43px; height: 43px; } #Media { margin: 0 4px; display: inline-block; min-width: 43px; width: 43px; max-width: 43px; min-height: 43px; height: 43px; max-height: 43px; } 还有这个 HTML 部分： <p id="HeaderTwo">Reachable under</p> <div id="Icons"> <a id="Media" href="#"><img id="Image" src="../img/discord.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/gmail.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/telegram.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/youtube.png" /></a> </div> 我尝试将以下内容包含到一些 CSS 元素中，希望它能充当盒子限制器或其他东西。类似，这样就不会/不应该发生错位。 min-width: 43px; width: 43px; max-width: 43px; min-height: 43px; height: 43px; max-height: 43px; 要避免元素调整布局大小，请使用 transform scale。现在，除了您的具体问题外，请考虑以下修复：避免使用 ID 进行样式设置（而且 ID 必须是唯一的）悬停动画是告诉用户图像是可点击的，所以触发器应该在<a>标签上 .image { width: 40px; height: 40px; transition: transform .3s; will-change: transform; } .media { display: inline-block; margin: 0 4px; } .media:hover .image { transform: scale(1.075); } <div class="icons"> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?1" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?2" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?3" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?4" /></a> </div>

html css hover alignment

回答 1 投票 0

如何在一张图中对齐两个 x 轴的值

我正在尝试使用 matplotlib 中的 twiny() 从由这些数据块组成的 XML 文件中绘制具有两个 x 轴的曲线： 2018-11-10T22:27:06.500003&...

python matplotlib alignment axis twiny

回答 2 投票 0

使 HTML/CSS 项目粘贴/对齐到行的左右边缘？

我想要一个较长但不是非常长的标题，像往常一样，我希望它与页面的左边缘对齐；进而，我想要一个普通的单词（所以作为第一个近似值，我已经输入了... 我想拥有一个较长但不是非常长的<h1>标题，像往常一样，我希望它与页面的左边缘对齐；然后，我想要一个普通的单词（所以作为第一个近似值，我把它作为<span>）放在同一行上，但我希望它右对齐（即，它粘在页面的右边缘；所以本质上，它占据它所占用的宽度，行的其余部分由标题填充）；最后下面我想要一段。比如： <div id="dhead"> <h1 id="htitle">Some longish title</h1> <span id="extra">Extra</span> <div> <p> Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros varius rutrum. Sed condimentum convallis dui id interdum ... </p> ...除了上面的例子之外，标题和“额外”一词甚至不在同一行。我尝试了以下弹性方法，如 CSS 两个彼此相邻的 div ： #dhead { display: flex; } #extra { /* width: 200px; // don't want to set width of this explicitly; it should take the width of its content, the word) */ } #htitle { flex: 1; /* Grow to rest of container (?) */ } <div id="dhead"> <h1 id="htitle">Some longish title</h1> <span id="extra">Extra</span> <div> <p> Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros varius rutrum. Sed condimentum convallis dui id interdum ... </p> ...现在更糟了——实际上，很糟糕——因为现在标题和单词 AND 段落位于同一行（？！）那么，如何将标题（向左）和单词（向右）对齐在同一行，并在下面有一个段落？我可以继续使用 <h1>、<span> 和 <p>，还是必须用样式化的 <div> 替换它们才能实现这样的效果？您只需使用flexbox即可达到您的目的。 #dhead { display: flex; justify-content: space-between; align-items: center; } #htitle { flex-grow: 1; } <div id="dhead"> <h1 id="htitle">Some longish title</h1> <span id="extra">Extra</span> </div> <p> Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros varius rutrum. Sed condimentum convallis dui id interdum ... </p>

html css alignment

回答 1 投票 0

如何使用 TailwindCSS 将行与换行文本居中对齐？

当行项目中的文本开始变长并换行时，我在使用 TailwindCSS 来对齐弹性行中的某些元素时遇到问题。这是我当前的实现：当行项目中的文本开始变长并换行时，我在使用 TailwindCSS 来对齐 flex-row 中的某些元素时遇到问题。这是我当前的实现： <div class="border-1 p-2 flex w-[250px] flex-col items-center rounded border border-solid border-gray-300"> <div class="flex flex-row"> <div>UUID</div> <div class="ml-2"> Text </div> </div> <div class="mt-2"> 2023-10-23 </div> </div> 如果文本不换行，它会按我想要的方式显示： https://play.tailwindcss.com/UEGaldW7eo 但是，当文本变大并开始换行时，行（UUID + 文本）不再居中对齐。我想要的是：但我无法让它发挥作用。有什么想法吗？可能的问题是由于 utrn 中的换行符导致flex-alignment。我使用 items-center 和 text-start 类来尝试实现您期望的布局。比如： div class="flex flex-col items-center text-start"> <div class="flex flex-row items-start justify-center"> <div class="pl-4">UUID</div> <div class="ml-2"> Text that is long enough to wrap on 2 lines and more </div> </div> </div> 代码演示

html css alignment tailwind-css flex3

回答 1 投票 0

如何将按钮（小部件）在网格中居中 - GTK C

我试图将这些按钮放在创建的网格中。我尝试过 set_halign 和变体，但没有什么是我想要的。不确定如何格式化，但请帮忙。 #包括圣...

c widget alignment gtk

回答 1 投票 0

Hamburguer 菜单图标未与 tabela 对齐在同一高度且不遵循相同的样式

我添加了一个汉堡包图标，但目前没有执行任何操作。当用户单击它时，它应该在左侧打开一个侧面板来显示我们网站的选项，这意味着它应该...

reactjs menu styles alignment

回答 1 投票 0

如何告诉 GCC 指针参数始终是双字对齐的？

在我的程序中，我有一个函数可以执行简单的向量加法 c[0:15] = a[0:15] + b[0:15]。函数原型为： void vecadd(float * 限制 a, float * 限制 b, float * 限制 c); ...