骨架CSS：输入标签后的放置按钮
我正在使用 skeleton css 用于我的简单嵌入式Web服务器。 我有一个问题要在同一行 /行中放置一个按钮，作为输入标签：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div class="row">
<div class="one-half column">
<form action="/clock" method="post">
<h4>Clock setup</h4>
<label for="datetime">Set datetime</label>
<div class="u-full-width">
<input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
<button type="button" class="u-pull-right" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
</div>
<input class="button-primary" type="submit" value="Submit">
</form>
</div>
</div>
</div>我不明白为什么在提交按钮之后，将“现在”按钮放在下一行上。 删除u-pull-right类或u-full width一个人什么都没有改变。
我在Linux Ubuntu下使用Firefox 101 22.04。
I'm using Skeleton CSS for my simple embedded web server.
I have a problem to place a button in the same line / row as an input tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.3/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div class="row">
<div class="one-half column">
<form action="/clock" method="post">
<h4>Clock setup</h4>
<label for="datetime">Set datetime</label>
<div class="u-full-width">
<input type="datetime-local" id="datetime" name="datetime" value="2015-01-02T11:42:13" step="1">
<button type="button" class="u-pull-right" onclick="document.getElementById('datetime').value = dayjs().format('YYYY-MM-DDTHH:mm:ss');">Now</button>
</div>
<input class="button-primary" type="submit" value="Submit">
</form>
</div>
</div>
</div>I don't understand why the "Now" button is placed on the next row, after the submit button.
Removing the u-pull-right class or the u-full-width one changes nothing.
I'm using Firefox 101 under Linux Ubuntu 22.04.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
问题是由于
一半类。鉴于媒体查询不同的是，对于某些浏览器宽度，半列对于这两个项目都太短（即使看起来并不那么在视觉上）。对于此特定形式，解决方案是依靠全宽列：
The problem is due to the
one-halfclass. Given the different media queries it happens that for some browser widths the half column is too short for both items (even if it does not seem so visually).For this specific form the solution is to rely on a full-width column:
我添加了
class =“ u-pull-left” style =“ width：calc（100％-98px）”遵循代码输入，IT按钮随之而来。它没有进入直列，因为输入是自身的Fullspace，并且将按钮按下另一排，我只是通过添加 u-pull-left class提供了一些空间，并减少了一些。总宽度宽度。I added
class="u-pull-left" style="width: calc(100% - 98px)"following code to input and it button came along with it. It was not coming inline because input was having fullspace for itself and was pushing the button to another row and I just provided some space for the button to come along by adding u-pull-left class and reducing some width from total width.