Question

我正在尝试创建响应式网页。我尝试将三个按钮对齐为响应按钮。我可以对齐普通按钮更新和取消。但重置按钮无法对齐...每次都定位在不同的位置。有任何帮助吗？

HTML code:

<div class="button-container">
    <button type="button" style="opacity:0.5;cursor:default;"  disabled="disabled" title="Update" id="updPsw">
    <span>Update</span>
    </button>
    <button class="mdclose" title="Cancel">Cancel</button>
    <s:reset title="Reset"></s:reset>
</div>

CSS:

.button-container{
    position: relative;
    top :20px;
    right: 40px;
}
input[type="reset"] {
    padding: 10px 30px 10px 30px;
    color: #FFF;
    background-color: #444;
    font-size: 0.8em;
    text-align: center;
    font-style: normal;
    border-radius: 5px;
    /*   width: 100%; */
    border: 1px solid #3ac162;
    border-width: 1px 1px 3px;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
/*  margin-bottom: 10px; */
/*  margin-top: 22px; */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    cursor: pointer;
    position: relative;
    bottom: 42px;
    right: 62px;
}

Answer 1

不使用strut标签，而是使用了html标签，并且计算出来了

Answer 2

CSS代码：

.button-container{
    position: inherit;
    top :20px;
    right: 40px;
}
input[type="reset"] {
    padding: 10px 30px 10px 30px;
    color: #FFF;
    background-color: #444;
    font-size: 0.8em;
    text-align: center;
    font-style: normal;
    border-radius: 5px;
    /*   width: 100%; */
    border: 1px solid #3ac162;
    border-width: 1px 1px 3px;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
/*  margin-bottom: 10px; */
/*  margin-top: 22px; */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    cursor: pointer;
    position: relative;
    bottom: 42px;
    right: 62px;
}

HTML CODE：

<div class="button-container">
    <button type="button"vstyle="opacity:0.5;cursor:default;"  disabled="disabled" title="Update" id="updPsw">
    <span>Update</span>
    </button>
    <button class="mdclose" title="Cancel">Cancel</button>
    <button class="mdclose" title="Reset">Reset</button>
</div>

jsp页面中struts标签的响应式设计页面

2 个答案: