76256

Place buttons on each side of scrollable div

Question:

I'm trying to place buttons on the left and the right side of a scrollable div. See this <a href="http://jsfiddle.net/y84VA/1/" rel="nofollow">jsfiddle[1]</a> where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the <a href="http://jsfiddle.net/y84VA/2/" rel="nofollow">jsfiddle[2]</a>. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?

Answer1:

I am confused with you saying buttons are not nicely <em>outlined</em>, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.

.btn { width: 30px; height: 40px; display: inline-block; vertical-align: top; }

<a href="http://jsfiddle.net/y84VA/5/" rel="nofollow"><strong>Demo</strong></a>

<hr />

You can also float all your elements to the left as <a href="https://stackoverflow.com/a/20609470/1542290" rel="nofollow">@Jarno</a> suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.

Answer2:

make all elements floating ~> <a href="http://jsfiddle.net/y84VA/8/" rel="nofollow">DEMO</a>

.content { width: 300px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 40px; display: inline-block; float: left; margin: 0 10px; } .btn { width: 30px; height: 40px; display: inline-block; float: left; }

OR you can use vertical-align for elements to fit each other vertically

Answer3:

You could use float:left; on .content and .btn.

Also, don't forget to put overflow:hidden; on your .container.

<a href="http://jsfiddle.net/4WUyW/" rel="nofollow">Example</a>

Answer4:

You need to add float positions to each .btn. float left for the left arrow and float right

Answer5:

Add the vertical align to the buttons:

.btn { width: 30px; height: 40px; display: inline-block; vertical-align: top; }

<a href="http://jsfiddle.net/y84VA/7/" rel="nofollow">http://jsfiddle.net/y84VA/7/</a>

Recommend

  • Hide JetBrains annotation on popup JavaDoc in IntelliJ
  • Can I run Robotium tests automatically in parallel on multiple emulators?
  • Android : Strike out Text with bold or thicker line than default STRIKE_THRU_TEXT_FLAG
  • Make background for table rows extend past the bounds of the table
  • Swift gives “self used before all stored procedures are initialized” error when building child nodes
  • Could be Text orientation of JTextArea changed by keyboard shortcut?
  • Zooming an element and its contents— an alternative to CSS3's zoom property?
  • Using LINQ with IBM i
  • Run script file on remote server
  • end daemon processes with multiprocessing module
  • Put value at centre of bins for histogram
  • CSS - Cannot get one spanned style to override another inherited style and align left
  • Laravel 4 routing not working due to .htaccess file?
  • netsh acl setting (need alternative method - registry settings?)
  • cordova is not defined - cordova.js has already been loaded :: Ionic
  • how to set variables in a php include file?
  • Implicit joins and Where in Doctrine - how?
  • calculate gradient output for Theta update rule
  • How does this usort cmp function actually work?
  • Button text different than value submitted in query string
  • Custom validator control occupying space even though display set to dynamic
  • Admob requires api-13 or later can I not deploy on old API-8 phones?
  • Change multiple background-images with jQuery
  • Recording logins for password protected directories
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Getting last autonumber in access
  • Read text file and split every line in MSBuild
  • C# - Serializing and deserializing static member
  • Is there a amazon webstore API for customers?
  • Java applet as stand-alone Windows application?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Do create extension work in single-user mode in postgres?
  • log4net write single file for each call to log.info
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Error creating VM instance in Google Compute Engine
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • python draw pie shapes with colour filled