按钮和输入元素未应用 css 样式：背景
[英]Button and input elements doesn't get applied css style : background
问题描述
我想带来类似于图中所示的输出。 我在 table2() 中构建表格并使用 ButtonDOM() 构建按钮。
我想得到如图所示的布局，所以我让按钮元素向右移动一些像素。 我在 css 中有一个基本问题，
为了使元素向左、向右、顶部、底部移动，我必须将位置属性设置为相对或绝对，但是当我调整窗口大小时，我看到元素以不正确的方式重新排列。 我想在窗口调整大小元素上向左、向右、顶部、底部移动元素以正确显示。 如何实现这一目标？
我已将背景颜色应用于整个 div，但我看到按钮和日期输入元素出现在 div 之外，尽管所有这些元素都在此 div 内。
注意：我必须将输入日期和按钮元素相对和绝对定位，并将 div #buttonsdiv 相对定位到我需要的位置元素
function maintest () { table2(); ButtonDOM(); addClasses(); } function table2 () { let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable"); let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable"); let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"}); let $row1 = $('<tr>').appendTo($table); $('<td>').appendTo($row1); let header = $('<td>').text("Feature").appendTo($row1); let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table); let $cell0 = $('<td>').appendTo($row2); let $cell1 = $('<td>').appendTo($row2); let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1); $("#BorrowableTable").append($table); autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { selectedObj = ui.item.value; } }); } function addClasses () { let tableRows = $('tr').addClass('tableRows'); let tableDefn = $('td').attr({"class":"tableDefn"}); let tableHeader = $('th').attr({"class":"tableHeader"}); let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"}); } function ButtonDOM() { let buttonsdiv = $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv')); $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"}); $("<td>").html("Return Date").insertBefore(returnDate).css({"position":"relative","left":"350px","display":"inline"}); $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv) }
#buttonsdiv { height: unset !important; width:50%; position: relative; left :50px !important; bottom :0px !important; background-color: papayawhip !important; } #BorrowableTable { display: flex !important; flex-direction: column; height:fit-content !important; } #borrowable { display: unset !important; border-collapse: collapse; border-spacing :unset !important; margin-left:100px; } #BorrowableTable,.creamcolorInput,#buttonsdiv { background-color: papayawhip; } #borrowButton { position: absolute; left: 325px; top: 50px; height: 36px; width: 205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top: 35px; margin-left: 2px; } #returnDate { position: absolute; left : 330px !important; top:25px; height:36px; width:200px; } .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */ padding: 0; margin: 0; font-family: ffunit; font-size: 14px; font-weight: bold; padding-right: 50px !important; } button { height:36px; width:205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top:35px; margin-left: 2px; } input { height: 30px; width: 250px; font-size: 20px; text-indent: 6px; } .tbodyDOM { float: left !important; } .images { position: relative !important; cursor: pointer !important; width:35px !important; height:35px !important; left: 35px !important; } .underline { text-decoration: underline; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <body onload="maintest()"> <div id="BorrowableTable"></div> </body>
1 个解决方案
解决方案1
0 2020-02-20 12:10:45
我已经对 javascript 和 css 进行了更改，请检查并更新
function maintest () { table2(); ButtonDOM(); addClasses(); } function table2 () { let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable"); let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable"); let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"}); let $row1 = $('<tr>').appendTo($table); $('<td>').appendTo($row1); let header = $('<td>').text("Feature").appendTo($row1); let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table); let $cell0 = $('<td>').appendTo($row2); let $cell1 = $('<td>').appendTo($row2); let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1); $("#BorrowableTable").append($table); autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { selectedObj = ui.item.value; } }); } function addClasses () { let tableRows = $('tr').addClass('tableRows'); let tableDefn = $('td').attr({"class":"tableDefn"}); let tableHeader = $('th').attr({"class":"tableHeader"}); let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"}); } function ButtonDOM() { let buttonsdiv = $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv')); $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"}); $("<td>").html("Return Date").insertBefore(returnDate).css({}); $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv) }
#buttonsdiv { height: unset !important; width:50%; position: relative; left :50px !important; bottom :0px !important; background-color: papayawhip !important; } #BorrowableTable { display: flex !important; flex-direction: column; height:fit-content !important; } #borrowable { display: unset !important; border-collapse: collapse; border-spacing :unset !important; margin-left:100px; } #BorrowableTable,.creamcolorInput,#buttonsdiv { background-color: papayawhip; } #borrowButton { cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top: 35px; margin-left: 2px; } #returnDate { height:36px; width:200px; } .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */ padding: 0; margin: 0; font-family: ffunit; font-size: 14px; font-weight: bold; padding-right: 50px !important; } button { height:36px; width:205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top:35px; margin-left: 2px; } input { height: 30px; width: 250px; font-size: 20px; text-indent: 6px; } .tbodyDOM { float: left !important; } .images { position: relative !important; cursor: pointer !important; width:35px !important; height:35px !important; left: 35px !important; } .underline { text-decoration: underline; } <!-- begin snippet: js hide: false console: true babel: null -->
使用CSS Scale / Matrix不会使背景与元素保持一致
[英]Using CSS Scale/Matrix doesn't keep background aligned with elements
CSS样式已应用并显示，但是JS无法识别所应用的CSS
[英]CSS styles are applied and displayed but JS doesn't recognize the CSS applied
HTML // CSS // JavaScript：按钮或输入未显示在网络上
[英]HTML // CSS // JavaScript : button or input doesn't show up on web
即使我消除了背景图片，jqGrid altRows也不被应用
[英]jqGrid altRows doesn't get applied at all even when I eliminate background-image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.