Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/

Here is a simple example of what I have:

                <div class="logo spanHalf"><a href="#"> My site </a></div>
                <nav id="menu" class="spanHalf">
                    <li><a href="#">Fetured</a></li>
                    <li><a href="#">Latest Posts</a></li>
                    <li><a href="#">Contacts</a></li>
                </nav>

And here is my styling:

#menu {
    float : right;
    display:inline-block;
    vertical-align:middle;
}

#menu li{
    padding : 10px;
    display:inline;
    vertical-align:middle;
}

#menu a, .logo a {
    text-decoration:none;
    text-transform:uppercase;
    color: black;
    font-weight:bold;
}

#menu a:hover, .logo a:hover {
    color: red;
}

.logo {
    float:left;
    display:inline-block;
    vertical-align:middle;
    font-size : 28px;
}

Desired outcome:

MY SITE FETURED LATEST POSTS CONTACTS

htmlcss

Answer №1

It seems like your example contains invalid HTML as li elements should be nested in ul or ol. Consider using span instead. This could be causing an issue because the client's browser automatically adds padding to li elements to display them as a list, even without any stylesheet unless overridden.

Check out this link for an example


<nav id="menu" class="spanHalf">
    <span><a href="#">Featured</a></span>
    <span><a href="#">Latest Posts</a></span>
    <span><a href="#">Contacts</a></span>
</nav>

Answer №2

To ensure consistency, apply the same line-height to both elements.

#menu, .row{
    line-height: 40px; /* adjust this value as necessary */
}

Don't forget to update your HTML based on John Smith's instructions.

See Working Fiddle Here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to make sure that an element overflowing its container always starts from the top

My website has a section called <mat-drawer-container>, which contains a list of items called <mat-selection-list>. However, when the number of elements in the list exceeds the display height and scrolling is necessary, the scroll position star ...

htmlangularangular-material

Ways to access the value of an attribute in an AngularJS object

Is there a way to access the value of field.jobtype within a controller? var app=angular.module('myapp',['ui.bootstrap','ui.select']); app.controller('mycontroller',function($scope){ $scope.onStateSelected = func ...

angularjshtmljquery-select2ui-select

iPad not compatible with playing Mp4 videos offline

Having an issue with embedding an mp4 file on a webpage in iOS Safari. The video is embedded using the video tag: <video src='gizmo.mp4' width=560 height=320></video> However, instead of playing the video, the page shows the 'v ...

iphonehtmlcachingvideooffline

Space within a receptacle

As a newcomer to bootstrap5, I am encountering whitespace issues on the left side of my screen. While everything looks fine in full-screen mode, the whitespace around the image persists when I test responsiveness. https://i.sstatic.net/gZTq5.jpg Despite t ...

htmlcssbootstrap-5whitespacecol

The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...

javascripthtmlcssvisible

Unable to get 100% height to work properly in HTML5 ASP.net because of the DOCTYPE

I'm currently working on creating an Asp.net website with a unique single-page portfolio style for the homepage. Each project or section should be 100% height of the viewport, stacked underneath each other to make use of anchor tags. However, I'm ...

cssasp.nethtmlheight

Building a stack of DIVs, some with fixed heights and others without, potentially using only CSS

Hello everyone! I am having trouble deciding on the best approach to achieve a layout like the one below: +------------------------------------------------------------+ | div 0 , varying height +---------------------------------------------------------- ...

csshtmllayoutfixed

Incorporate the class directly into the datepicker input element in a React JS component

Adding a class directly to the input element is what I am trying to achieve here.https://i.sstatic.net/qGGwD.png The class MuiInputBase-input needs to be added. This code pertains to a date picker. import { DateTimePicker, MuiPickersUtilsProvider } from & ...

htmlcssreactjsmaterial-ui

Web GUI for insert, update, and delete functionalities

After repeatedly creating Add/Edit/Delete/List GUI's, I have grown weary and frustrated with the process. Surely, there must be a free package available that can simplify this tedious task. I envision something like the following code snippet: { ...

c#htmlweb

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

I need assistance with populating all textbox values based on the dropdown selection. The dropdown values are fetched using an SQL query. Here is the HTML Code: <select name="name" ID="name" class="form-control"> <opt ...

javascriptphphtmlsql

Having trouble with the width of the Material-UI drawer feature

Encountering an issue with the material-ui drawer. I adjusted the width of the drawer container, which led to a problem where the drawer remains slightly inside the page and visible without clicking the button. It seems to be related to the transform attri ...

javascriptcssreactjsmaterial-uireact-component

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

javascripthtmlcss

Position the button at the corner of the textarea

How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far: Current code snippet: form with modal <%= form_for @note, :url => registrant_notes_path(@registrant), remote: ...

htmlcssruby-on-rails

Show off a sleek slider within a Bootstrap dropdown menu

Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...

javascriptjquerycssbootstrap-4slick.js

What causes the form to consistently show as invalid once it has been submitted?

register.html : <form [formGroup]="signupForm" (submit)="onSubmit()" class="form-detail"> <h2>Registration Form</h2> <div class="form-row-total"> <div class="form-row"> <in ...

htmlangulartypescript

Dealing with HTML fields that share the same name in various positions can be tricky

Currently, I have developed a non-commercial web application using basic HTML, PHP, and Javascript along with Dynamic Drive's Tab Content code. This app serves as a tool for managing the books in my home library as well as on my ereader. My main goal ...

javascriptphphtmlajax

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs. If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz ...

jqueryhtmlcssjquery-animatecss-float

Is it possible to use PHP to retrieve and display an entire webpage from a separate domain?

Currently, I am working on a PHP program that allows me to load a complete webpage and navigate the site while remaining in a different domain. However, I have encountered an issue with loading stylesheets and images due to them being relative links. I am ...

phphtml

Can anyone suggest a way to change the orientation of mapped items from column to row?

In my React app, I am creating a keyboard using the following component: Keypad.js const Keypad = () => { const letters = [ 'Q', 'W', 'E', 'R', 'T', ...

htmlcssreactjs

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

I'm attempting to create a square that adjusts its size according to the screen size. Currently, I have the width set to 25%. Is there a way to ensure that the height remains the same length in pixels as the width? Appreciate any assistance on this ...

javascriptcsshtml