Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%?
I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines.
How can I solve this issue?
* {
margin: 0px;
}
input {
width: 70%;
}
button {
width: 30%;
}<div>
<input type="text" />
<button>Button</button>
</div>Include the following code snippet:
* {
box-sizing:border-box;
}
This is necessary because browsers add padding and border to input/buttons, causing the total width to exceed 100%.
The code above ensures that all elements factor in padding and border into their width calculation.
You may also encounter white-spacing issues due to elements being on separate lines. To address this, you can either place them on the same line without spaces or use comments to remove whitespace:
* {
box-sizing: border-box;
margin: 0px;
}
input {
width: 70%;
border: 3px solid;
}
button {
width: 30%;
}<div>
<input type="text"><!--
--><button>Button</button>
</div>Another solution would be to set the div element's font-size to 0px to eliminate white-space, as long as it doesn't impact child elements' relative font size.
Initially, the button comes with a default border, making the total width slightly exceeding 100%. You can adjust it by following these steps:
input {
float: left;
width: 69%;
}
button {
float: left;
margin: 0px;
width: 30%;
box-sizing: border-box;
}
I need assistance in preventing all forms of page scrolling within my HTML5 application. Despite searching on popular platforms like SO and Google, I have been unable to find a comprehensive solution for disabling all scrolling mechanisms entirely. Existin ...
Issue specific to Google Chrome and Windows 10 I'm currently working on a flipbook that adjusts content size using transform:scale() based on the user's screen size. There is also a zoom feature that allows users to adjust the scale factor. I ha ...
Back in the "good old days," we used to simply put everything into td cells and it would all line up perfectly. Now, with CSS, things are a bit more complicated. I'm struggling with how to achieve a specific layout. What I want is to have text on the ...
Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...
I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...
I am struggling to set up a jquery slider (flexslider) It seems like I am overlooking something very fundamental, but for some reason I just can't figure it out. Any assistance would be greatly appreciated. Please check out the link to the test site ...
In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...
I've searched through the CSS and I'm unable to identify what is causing the width between the top level links on my navbar. I need them to be slightly smaller so that when it adjusts for a screen below 900px, it doesn't convert into a 2-row ...
My index.html layout in a desktop window screen involves using flexbox to have two div elements in one row, a long div element in the second row, and two div elements in the third row, with one containing a list. I want spacing between the div elements in ...
I just created my first website page with a few background images that crossfade. However, I am experiencing an issue where the next background image takes some time to load during the crossfading effect if the page is not cached on the user's comput ...
Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? I have implemented this type of validation for a text box: <div class="form-group"> <label class="control-label col-sm-3" for="judul ...
Is there a way to deactivate the Date Created textbox on the Edit Orders page of Woocommerce? I attempted to use pointer-events: none; but unfortunately, it did not have any effect. I am seeking a method to disable the Date Created field. ...
I'm looking to arrange my header ('Sail away today with Starboard Rentals.') and link buttons on top of each other. I want the navigation buttons to be positioned below the h1 on the lower half of the 'home-jumbo' div. What's ...
I recently utilized the Bee3d library available on the following Github link: https://github.com/lukeed/bee3d While I found everything to be truly impressive, I am curious if there is a way to adjust the image size. Whenever I attempt to change the image ...
I am attempting to dynamically change the class of a tab on the dashboard based on the selected page. In the dashboard, there are 3 tabs: <div> <ul class="menu"> <li class="MenuDashboard"><a href="#" >Dashboard</a&g ...
Is there a way to create a horizontal button scrollbar using only HTML and CSS? I want it to look like this: https://i.stack.imgur.com/RWFRt.png After searching online for a solution, I came up with the following code: .myBtnContainer{ display: gri ...
I'm utilizing the carousel from Bootstrap 5, and here is the image. https://i.sstatic.net/dpmjf.jpg The previous and next icons are overlapping with the text. I would like to reposition them, if possible, just above the upvote/downvote buttons. Howe ...
I am currently working on designing a user interface (UI) for mobile screens that includes a header, grid, and buttons. I want the UI to look consistent across all mobile devices. Here are screenshots from various mobile screens: Samsung S5 Pixel 2 XL I ...
I am working on a project to design an HTML page that features a profile picture with a heart frame. I have the PSD file with the heart frame included. The profile pictures will be rectangular in shape and should fit behind the heart frame without overlap ...
I've been trying to implement an animated skill bar in my Portfolio using JQuery, but I'm facing some challenges. Despite following various tutorials, the code doesn't seem to work as expected. I've tried calculating section scroll posi ...